子盒子水平垂直居中的几种方式。
所有的结构都是,父盒子套一个子盒子。
<div class="father">
<div class="son"></div>
</div>
第一种(定位)
不推荐使用,有点麻烦。
<style>
.father {
width: 400px;
height: 400px;
background-color: lightgreen;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
第二种(定位)
四个0,再加 margin: auto
<style>
.father {
width: 400px;
height: 400px;
background-color: lightgreen;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
第三种(定位)
利用translate 实现盒子在x轴和y轴各移动-50%,来实现子盒子水平垂直居中
<style>
.father {
width: 400px;
height: 400px;
background-color: lightgreen;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
第四种(Flex布局)
Flex 布局(弹性布局) 全称:Flexible Box
注意,设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效
推荐使用,这种实现子盒子水平垂直居中,非常简便,只需要给父盒子三行代码即可实现,但需要考虑兼容性。
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
display: flex;
/*`沿主轴居中排列 */
justify-content: center;
/*沿侧轴居中排列*/
align-items: center;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>