CSS 垂直居中的实现
作者：idd.chiang 发布时间：February 5, 2010 分类：HTML/CSS
CSS垂直居中常见有下面的几种实现方法：
直接看例子：CSS 垂直居中的解决
1.当黄色背景div（160）和灰色背景div（60）都知道高度的情况下，最简单的办法可能是直接用灰色div的上边距去实现一个让灰色div垂直居中的样子。
2.利用垂直居中即：vertical-align:middle，我们可以将红色的div置为inline属性，在此div同一层级新增一个空的inline元素，利用这个空元素和line-height属性，实现垂直居中
#inlineBlock{
width:100%;
border:1px solid green;
background-color:#90e07a;
height:180px;
line-height: 180px;
text-align:center;
}
#inlineBlock div{
background-color:red;
display:inline-block;
vertical-align:middle;
*display:inline;
*zoom:1;
text-align:left;
line-height:1.5em;
}
#inlineBlock p{
border:1px solid orange; ;
background-color:#dfdfdf;
}
#inlineBlock i{
display:inline-block;
}
3. 为了实现垂直居中，我们想到table的表格td具有valign="middle"垂直居中的属性，这样可以利用display的table布局来实 现。很可惜，我们知道ie8在2008年发布的时候说了要支持display的表格布局，但是别忘了，这是中国，ie6、7当道，这两兄弟是不管这玩意儿 的。：
#tableBlock{
display:table;
width:100%;
border:1px solid blue;
background-color:#3389ff;
height:180px;
padding:10px;
position:relative;
overflow:hidden;
}
#tableBlock div{
display:table-cell;
vertical-align:middle;
background-color:white;
*position:absolute;
top:50%;
}
#tableBlock p{
border:1px solid orange;
*position:relative;
top:-50%
}
→这是ie6、7下的展现
那现在业内常用的做法：用相对位置与绝对位置来实现ie6、7下的垂直居中，个人觉得这种方法比第二种方法代价高。而且会增加各种hack，人会问，那横向居中呢？是呀，一大堆的问题，一大堆的hack,个人也不想再深研究。
demo:CSS 垂直居中的解决
