1. table-cell + vertical-align
HTML部分:
<div class="parent">
<div class="son"></div>
</div>
-----------------------------
CSS部分:
div.parent {
display: table-cell;
vertical-align: middle;
}
-----------------------------
优点:兼容性较好
2. absolute + transform
HTML部分:
<div class="parent">
<div class="son"></div>
</div>
-----------------------------
CSS部分:
div.parent {
position: relative;
}
div.son {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
----------------------------
由于绝对定位所以不影响其他元素,但是由于transform是CSS3新增属性,所以兼容性较差。