垂直居中布局方案

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新增属性,所以兼容性较差。