CSS子盒子居中对齐
这个问题是面试常考点,以下收集了一些常用的居中方法🌴。
1 水平居中
- 子元素定宽,左右margin为auto,margin的auto不能在垂直方向上居中,垂直方向上知道父盒子高度可以设置margin。
<div class="father">
<div class= "soon">
</div>
</div>
.father{
width: 400px;
height: 200px;
background-color: red;
}
.soon{
width: 100px;
height: 50px;
background-color: green;
margin: 0 auto;
}
2 水平垂直居中
- 利用定位(推荐)
.father{
position:relative;
width: 400px;
height: 200px;
background-color: #8c8c;
}
.soon{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
width: 100px;
height: 50px;
background-color: #666;
}
3 flax布局(弹性布局)
- flex布局相对简单,很适合移动端,pc端有兼容性问题。
.father{
display: flex; // flex布局
justify-content: center; // 主轴上居中
align-items: center; // 侧轴上居中
width: 400px;
height: 200px;
background-color: #8c8c;
}
.soon{
width: 100px;
height: 50px;
background-color: #666;
}