不知宽高的DIV水平垂直居中

作者：南瓜马车

链接：https://zhuanlan.zhihu.com/p/27186791

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

1、使用CSS方法：

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

不定宽高的div设置：display：inline-block；vertical-align：middle；

代码实现：

效果：

2、使用CSS3transform

父盒子设置：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；

代码实现：

效果实现：