参考:http://css-tricks.com/centering-in-the-unknown/
<style>
.valign {
font-size: 0px;/* clear spacing*/
}
.valign:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.valign-middle,
.valign-bottom {
display: inline-block;
font-size: 1rem;
}
.valign-middle {
vertical-align: middle;
}
.valign-bottom {
vertical-align: bottom;
}
</style>
<div class="valign" style="height: 20rem;border:1px solid red;">
<div class="valign-middle" style="border:1px solid blue;">
我在中间
</div>
</div>
<br>
<div class="valign" style="height: 20rem;border:1px solid red;">
<div class="valign-bottom" style="border:1px solid blue;">
我在底部
</div>
</div>