常用CSS垂直居中

1.当黄色背景div（160）和灰色背景div（60）都知道高度的情况下，最简单的办法可能是直接用灰色div的上边距去实现一个让灰色div垂直居中的样子。

最笨的做法，前提是我们得知道灰色的块的高度和外围容器的高度。

2.利用垂直居中即：vertical-align:middle，我们可以将红色的div置为inline属性，在此div同一层级新增一个空的inline元素，利用这个空元素和line-height属性，实现垂直居中

后面跟了一个空i标签

3.为了实现垂直居中，我们想到table的表格td具有valign="middle"垂直居中的属性，这样可以利用display的table布局来实现。很可惜，我们知道ie8在2008年发布的时候说了要支持display的表格布局，但是别忘了，这是中国，ie6、7当道，这两兄弟是不管这玩意儿的。：

文字文字文字文字文字文字文字文字文字文字文字文字http://www.microidc.com

* 那现在业内常用的做法：用相对位置与绝对位置来实现ie6、7下的垂直居中，个人觉得这种方法比第二种方法代价高。而且会增加各种hack，人会问，那横向居中呢？是呀，一大堆的问题，一大堆的hack,个人也不想再深研究。

CSS 代码：

#boxBlock{
	height:160px;
	border-color:red;
	background-color:#fbffb4;
}
#boxBlock div{
	height:60px;
	vertical-align:middle;
	background-color:#ccc;
	margin-top:50px;
}
#boxBlock p{
	border:1px solid orange; ;
	background-color:#fff;
}

#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;
}

#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%
	
}

Please send bug reports to idd.chiang[At]gmail.com