不定寬高div垂直水平居中問題

讓一個不定寬高的div，垂直水平居中的幾種實現方式

不定寬高的div垂直居中的方式：

1、使用CSS方法：

父盒子設置：display：table-cell；text-align：center；vertical-align：middle；

不定寬高的div設置：display：inline-block；vertical-align：middle；

代碼實現：

效果：

2、使用CSS3 transform

父盒子設置：display：relative

div：transform：transform(-50%,-50%)；position：absolute; top：50%；left：50%；

代碼實現：

效果實現：

3、彈性盒子

父盒子設置：display：flex; justify-content：center；align-items：center;

代碼實現：

效果實現：

定寬高的div的垂直水平居中方式

1、margin負值

父盒子設置：position：relative;

div設置：top：50%；left：50%；margin-top：-25px；margin-left：-25px；

代碼實現：

效果實現：

2、奇淫技巧

父盒子設置：position：relative；

div設置：position：absolute；margin：0 auto；top：0；left：0；right：0；bottom：0；

代碼實現：

效果實現：

推薦閱讀：