<div class="parent">
<div class="child"></div>
</div>
1. 通过flex布局
html, body {
margin: 0;
padding: 0;
height: 100%; //高度必须设置,否则垂直方向不居中
}
div.parent {
display: flex;
height: 100%; //高度必须设置,否则垂直方向不居中
justify-content: center;
align-items: center;
}
div.child {
width: 200px;
height: 200px;
background-color: red;
}
2. 绝对定位 + margin偏移
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div.parent {
position: relative;
height: 100%;
}
div.child {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; //宽高的一半
margin-left: -100px; //宽高的一半
}
3. 绝对定位 + translate
div.child {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); //50%参照自身宽高
}
4. 绝对定位 + margin:auto
div.child {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
5. 使用 grid 布局
div.parent {
display: grid; //父容器grid布局
height: 100%;
}
div.child {
justify-self: center;
align-self: center;
width: 200px;
height: 200px;
background-color: #0000FF;
}
6. 伪元素
div.parent {
font-size: 0;
text-align: center;
&::before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}
div.child{
display: inline-block;
vertical-align: middle;
}
原理(转载):
设置inline-block和vertical-align:middle后,里面的元素会基于中间的文字准线居中对齐(学生时代的英语本子里面写字母,都是4条线形成三个空白区域,文字的对齐就是根据这几条线的)vertical-align更多信息可以看看张鑫旭博文; 然后,由于伪类是position:static(默认)的,那么伪类撑开了父元素的基准线(高度是100%),使得此时文字的基准线就是整个div.parent的中心了,另外vertical-align只影响inline或者inline-block的,所以div.child设置vertical-align就能居中了。