垂直居中布局方案

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