今天去面试的时候,被问到css怎么实现高度不定的垂直居中,突然就懵了,之前面试的都是js相关知识,发现css的知识自己缺少总结,今天就先理一下不定高的垂直居中吧!
首先第一种:用flex布局实现不定高垂直居中:
html代码:一个父div,一个子div;
<div class="p">
<div class="s">
我是不定高div,需要垂直居中
我是不定高div,需要垂直居中
</div>
</div>
css代码:父div固定高度,子div根据内容自适应;
通过设置父div为flex,然后设置主抽和交叉轴方向center即可;
.p{
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 600px;
height: 400px;
background-color: #1e88e5;
}
.s{
width: 300px;
background-color: #fd9927;
}
效果截图:
缺点:浏览器兼容性不好,IE10以上才能用;
第二种:position定位实现不定高垂直居中:
html代码一样,直接上css代码:
.p{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
background-color: #1e88e5;
}
.s{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
background-color: #fd9927;
}
注意父div一定要设置relative或者fixed,不然的话会一直找其祖先元素搜索设置了relative或者fixed的div,然后根据其定位,都没有的话是根据body定位;
解释一下为啥要设置transform, 因为设置top和left为50%是按照子div的左上定点实现定位的,这样会导致子div自身的宽度和高度不在居中范围内,设置transform之后,将其自身的宽度和高度向上、左移动其自身的50%,就实现和水平和垂直居中;
效果图就不上了,太占地,老铁们可以自己敲一遍代码查看效果;
缺点:1、IE8不支持;2、transform属性需要写浏览器厂商前缀;3、可能干扰其他transform效果;4、某些情形下会出现文本或元素边界渲染模糊的现象;
目前知道这两种,还有table和table-cell布局实现垂直居中后,会导致子元素继承父元素的高度,不明白为啥,先不写了;
老铁们有好的方法可以留言。