以伪元素为中心
HTML:
<div class="wrapper">
<div class="content"></div>
</div>
CSS:
.wrapper{
min-height: 600px;
}
.wrapper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
display: inline-block;
height: 80px;
vertical-align: middle;
}
这种方法最适用于在 .wrapper
内部有一个高度变化的 .content
; 当 .content
的高度超过 .wrapper
的最小高度时,你想要 .wrapper
的高度扩展。