威言威语

Div与CSS布局中，最让人头疼的就是容器内的东西如何垂直居中的问题，而垂直居中对table来说是小菜一碟，只需指定单元格为vertical-align: middle即可，但这在css布局中不管用。

那么我们是不是可以将div转变成表格呢？这个想法是可行的，W3C参考手册中就提到这些属性，http://www.w3school.com.cn/htmldom/prop_style_display.asp

你可以给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：

table

使该元素按table样式渲染

table-row

使该元素按tr样式渲染

table-cell

使该元素按td样式渲染

table-row-group

使该元素按tbody样式渲染

table-header-group

使该元素按thead样式渲染

table-footer-group

使该元素按tfoot样式渲染

table-caption

使该元素按caption样式渲染

table-column

使该元素按col样式渲染

table-column-group

使该元素按colgroup样式渲染

类似的，display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及新型浏览器（Chrome，FireFox。Opera等）都是支持此属性的，但是IE6/7则不支持这一属性，这事实上也是大大制约了display:table-cell属性在实际项目中的应用。

那么，我们实际使用的时候就必须给IE做一些Hack。

Html代码：

<div class="box">
<img src="https://www.weisay.com/blog/ico/css.gif" alt="" />
</div>

CSS代码：

.box {
width:400px;
height:200px;
background:#f2fbff;
border:1px #b8e8ff solid;
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}

演示地址：

本文固定链接: https://www.weisay.com/blog/img-horizontal-vertical-center.html | 威言威语