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>