垂直居中的方法,如果全写出来,有10多种。面试的时候一般都会说比较常用的几种。flex、position + transform、position + 负margin是最常见的三种情况。
<div class="outer">
<div class="inner"></div>
</div>
方法一:flex
.outer{
display: flex;
justify-content: center;//主(横)轴
align-items: center;//侧(纵)轴
}
方法二: position + transform, inner宽高未知
.outer{
position:relative;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法三:position + 负margin, inner宽高已知
.outer{
position: relative;
}
.inner{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
方法四:设置各个方向的距离都是0,再将margin设为auto,也可以实现,前提是inner宽高已知
.outer {
position: relative;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}