文章目录Html代码：CSS代码：演示地址：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 >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;演示地址： VIEW DEMO