1. 使用table-cell和vertical-align实现垂直居中
html
<div class="parent">使用table-cell和vertical-align实现垂直居中</div>
css
.parent{
display: table-cell;
vertical-align: middle;
height:300px;
}
效果
2. 使用line-height和vertical-align实现垂直居中
html
<div class="parent">使用vertical-align和line-height实现垂直居中</div>
css
.parent{
display: inline-block;
vertical-align: middle;
line-height:300px;
}
效果图
3. 使用position实现垂直居中
html
<div class="parent">
<div class="child">使用position实现垂直居中</div>
</div>
css
.parent{
position: relative;
}
.child{
position: absolute;
top:50%;
transform: translate(0,-50%);
}
4. 使用flex实现垂直居中
html
<div class="parent">使用flex实现垂直居中</div>
css
.parent{
display: flex;
align-items: center;
}