设置元素的垂直居中

总结一下居中的一系列问题：

（1）单行文本垂直居中

　　设置行高：line-height

（2）垂直居中一张图片

　    设置行高：

<div >
　　<img src="img.png">
</div>
<style>
　  #parent{

　　line-height:200px;
　　}
   #parent img{
    vertical-align:middle
　　}

</style>

　　利用css，table布局的方式：(假如一个页面中既有单行数据，又有多行的数据，此时设置行高，或者padding的方法都会行不通，此时利用display:table的方法就很完美了)

<div >
    <div >Content here</div>
</div>
<style>
     #parent {display: table;}
     #child {
          display: table-cell;
          vertical-align: middle;
     }
</style>    

　　利用定位的方法：

#parent {position: relative;}
#child {
    position: absolute;
    top:50%;
    left:50%;
    width: 50%;
    height: 50%;
    margin: -25% 0 0 -25%; 
}