参考博客:https://blog.csdn.net/bury_/article/details/79430943
1.基于表格样式
将要使内容居中的外层容器元素的display设置成table,内层内容块使用table-cell,然后分别设置水平和垂直居中:
/*表格方案*/
#table-father{
display:table;
}
#table-child{
display:table-cell;
text-align:center;
vertical-align:middle;
}
2.基于绝对定位
有两种方法,一种利用transform属性,一种利用margin:auto (定位的缺点在于绝对定位可能影响布局,以及可能元素会显示模糊)
/*绝对定位方案*/
#position-child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
或者2绝对居中,但如果是可变高度必须声明高度
.absolute-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width:50%;
height:50%;
}
3.基于视口单位
要把元素相对于视口进行居中,那么相当于父元素的高度就是视口的高度,视口的高度可以用vh来获取:
/*相对于视口单位进行居中的解决方案*/
#view-child{
margin:50vh auto 0;
transform:translateY(-50%);
}
4.基于Flexbox
要考虑兼容性问题,兼容性写法:
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
当父元素设置为display:flex后,子元素设置margin:auto就可以相对于父元素在垂直和水平方向进行居中:
/*基于伸缩盒的解决方案*/
#flex-father{
display:flex;
}
#flex-child{
margin:auto;
}
如果不使用margin使用flex中的属性,父元素也可以写成:
div#flex-father{
display:flex;
align-items:center;
justify-content: center;
}
总结
垂直居中有四种方法:
1.基于表格样式,可以不使用表格元素而在需要内容居中的容器元素上设置display:table-cell以及text-align和vertical-align属性设置居中;
2.基于绝对定位,可能影响布局和出现显示模糊的问题
3.基于视口单位实现相对于视口居中
4.基于Flexbox,需要考虑浏览器支持