在网页制作的过程中，经常会遇到子元素嵌套在父元素中，需要子元素垂直水平居中的场景。现将子元素水平且垂直居中的几种方法总结如下：
原始代码：
<style>
*{margin:0;padding:0;}
.out_box{width:200px;height:200px;background:#99f;}
.in_box{width:100px;height:100px;background:#ff9;}
</style>
<body>
<div class="out_box">
<div class="in_box"></div>
</div>
</body>
pic1.原始图
pic2.实现图
一.使用margin自适应和偏移实现
.out_box{
width:300px;height:300px;background:#99f;
overflow:hidden; /*解决margin-top向上传递*/
}
.in_box{
width:200px;height:200px;background:#ff9;
margin:0 auto; /*水平居中*/
margin-top:50px; /*垂重居中*/
}
缺点：需要已知父元素的高度，且需要计算，当父元素高度变化的时候，需要重现计算。而且容易出现margin-top向上传递的问题，需要在父元素写overflow:hidden。
二．使用定位和margin自适应实现
.out_box{
width:300px;height:300px;background:#99f;
position:relative; /*父元素相对定位*/
}
.in_box{
width:200px;height:200px;background:#ff9;
margin:auto; /*水平居中*/
position:absolute; /*子元素绝对定位*/
left:0;
right:0;
top:0;
bottom:0;
}
三．使用定位和margin固定偏移实现
.out_box{
width:300px;height:300px;background:#99f;
position:relative;
}
.in_box{
width:200px;height:200px;background:#ff9;
position:absolute;
left:50%;/*这里指的是父元素的50% */
top:50%;
margin:-100px 0 0 -100px;/* -子元素高的一半 0 0 -子元素宽的一半*/
}
四．使用定位和2D位移实现
.out_box{
width:200px;height:200px;background:#99f;
position:relative;
}
.in_box{
width:100px;height:100px;background:#ff9;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /*这里指的是子元素的50% */
}
五．使用弹性盒子实现
.out_box{width:300px;height:300px;background:#99f;
display:flex;
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中*/
}
.in_box{width:200px;height:200px;background:#ff9;}
六．使用伪元素和vertical-align实现
.out_box{
width:300px;height:300px;background:#99f;
text-align:center;/*使块元素中的行内块元素水平居中*/
font-size:0;/*去除因为子元素换行产生的右边的5px距离*/
}
.out_box:after{
content:"";
display:inline-block;/*使新建的伪元素和子元素保持在一行，且可以设置宽高*/
height:100%;/*使伪元素高度等于父元素*/
vertical-align:middle; /*设置基线为中间*/
}
.in_box{width:200px;height:200px;background:#ff9;
display:inline-block;/*作用是不换行，且当父元素设置text-align:center时，子元素（行内块）水平对齐*/
vertical-align:middle;/*使得基线和伪元素基线对齐*/
}
以上是对css中元素垂直且水平居中的整理，如有修改、补充，后续会更新。
文中如果纰漏，错误，不合理，描述不清晰，不准确等问题，欢迎大家留言指正...
网友评论