各种居中方式小记

1.单行内容的居中

.middle-demo-1{

height: 4em;

line-height: 4em;

overflow: hidden;

}

2.父元素未设置高度，内容居中

.middle-demo-2{

padding-top: 24px;

padding-bottom: 24px;

}

3.子元素有固定高度，使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。

#content {

position:absolute;

top:50%;

height:240px;

margin-top:-120px; /* negative half of the height */

}

4.使用表格的 vertical-align property 属性

#wrapper {display:table;}

#cell {display:table-cell; vertical-align:middle;}

5.子元素 position:absolute，有固定宽度和高度

#content {

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

height:240px;

width:70%;

}

6.使用css3的translate

css{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);}

参考：www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html