css學習筆記之垂直居中

學習來源：http://www.cnblogs.com/xiaohuochai/p/5438791.html

line-height

行高line-height實現單行文本垂直居中

vertical-align

設置vertical-align:middle實現垂直居中

1）設置父元素的    { display：table-cell
                                 vertical-align:middle }   可使其子元素均實現垂直居中。這和表格裏單元格的垂直居中是類似的
[注意]若要IE7-瀏覽器支持，則可以將其改爲<table>表格結構
[注意]設置爲table-cell的div不能使用浮動或絕對定位，因爲浮動或絕對定位會使元素具有塊級元素特性，從而喪失了table-cell元素具有的垂直對齊的功能。若需要浮動或絕對定位處理，則需要外面再套一層div。

2）若子元素是圖片，通過設置父元素的行高來代替高度，且設置父元素的font-size爲0。 元素(圖片)的中垂點與父元素的基線加1/2父元素中字母X的高度對齊，字符X在em框中並不是垂直居中的，，當字體大小較大時，這種差異就更明顯。

.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}

<div class="parent" style="background-color: lightgray;width:200px;">
    <img class="child" src="img1.gif" width="50%" alt="test">  
</div>