让一个不定宽高的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;
代码实现:
效果实现: