水平居中布局
- 固定一个宽度,然后添加
margin:0 auto
属性
div {
width: 200px;
margin: 0 auto;
}
- 利用
inline-block
+text-align: center
实现
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
<div class="container">
<div class="box"></div>
</div>
水平垂直居中布局
宽高固定
- 利用绝对定位,设置四个方向的值都为
0
,并将margin
设置为auto
,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
- 利用绝对定位,先将元素的左上角通过
top:50%
和left:50%
定位到页面的中心,然后再通过margin
负值来调整元素的中心点到页面的中心。
div {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
不限宽高
绝对定位
利用绝对定位,先将元素的左上角通过 top:50%
和 left:50%
定位到页面的中心,然后再通过转换属性 -- translate
来调整元素的中心点到页面的中心。
div {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex 布局
使用 flex
布局,通过 align-items:center
和 justify-content:center
设置容器内的子元素在垂直和水平方向上为居中分布。
.container {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="box"></div>
</div>
多列等高布局
多列布局中,列之间的高度不一样就会像上图一样参差不齐,影响整齐度。这里介绍最简单实用的方法 -- flex
。
flex
设置 item
在交叉轴上的布局方式为 stretch
(拉伸为父元素的高度),就能实现多列等高效果:
.container {
display: flex;
align-items: stretch;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>