垂直居中 小记

/*   top:50%   margin-top:-35px    */.wrap{height: 200px;width: 200px;border: 4px solid #BBBBBB;position: relative;}.inner{position:absolute;height: 70px;width: 120px;background-color: #FFBFBF;top:50%;margin-top:-35px;}<div class="wrap">    <div class="inner"></div></div>//==============================================================================//==============================================================================/* td{vertical-align: middle;}*/td{vertical-align: middle;border: 4px solid #BBBBBB;height: 200px;width: 200px;}.tddiv{height: 70px;width: 120px;background-color: #FFBFBF;}<table><tr>   <td><div class="tddiv"></div></td></tr></table>//==============================================================================//==============================================================================/*div { display:table; }  p{ display:table-cell; vertical-align:middle; }*/.wrap2{display:table;height: 200px;width: 200px;border: 4px solid #BBBBBB;}.inner2{display:table-cell;vertical-align: middle;}<div class="wrap2"><p class="inner2">content</p></div>//==============================================================================//==============================================================================/*多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%*/.wrap3{height: 200px;width: 200px;border: 4px solid #BBBBBB;position: relative;}.hack{position:absolute;height: 70px;width: 120px;background-color: #FFBFBF;top:50%;}.inner3{height: 70px;width: 120px;background-color: #82E0FF;position: absolute;top:-50%;}<div class="wrap3"><div class="hack"><div class="inner3"></div></div></div>//参考自：http://sofish.de/1909