最近在it教程网看见了这篇老文章，看见了元素居中的5种办法，其中提到了display:table-cell这个css显示的新属性，按照当时的浏览器市场来说想必兼容性会是糟糕的一比，但是现在这坛老酒其实可以用到移动端来。

在PC端，应该很少用到 display:table-cell 这个属性，究其原因在于兼容性【IE8+以及现代浏览器才支持】，或者说很少去关注这个标签。此标签的用处就是垂直居中布局功能，这个功能可以让我们不用依赖 margin:0 auto 属性达到居中的目的，并且 margin 外边距还达不到 table-cell 的效果。

元素居中

让一个块级元素居中，我们都想到了 margin:0 auto 属性，一般的最外层的布局经常看见这属性，但是这样的居中只是把元素整体居中，元素中的内容依然按照正常流来排列，从左上角到右下角。但是这样并达不到我们需要的效果，我们需要的效果是不管元素里面的内容有多少，还是添加新内容都是垂直居中于元素。

关于垂直居中的办法，用的最多应该 position + margin 负值的办法达到居中的效果

.test{
	height: 400px;
	position: absolute;
	top:50%;
	margin-top: -200px;
	background-color: #ccc;
}

兼容性很好，但是必须先要确定元素的高度，并且假如包含块的高度容不下元素的内容，那么此时就要用 overflow 来处理，假如这个包含块是有背景颜色的，那么就会这样

红色框框中的小渣渣被偷窥地一览无遗，显然这是我们不想看到的，好好的穿着一件裤子，结果裤裆一直处于风口状态，呵呵。

2.float + height +margin负值，代码

#floater	{float:left; height:50%; margin-bottom:-120px;}
#content	{clear:both; height:240px; position:relative;}

还是要知道你的高度，然后折半margin反拉上来。

3.position + margin，利用margin的auto恰好地把上右下左都给填满外边距的办法使其垂直居中，但是IE8-也是不支持的，代码如下

.test {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:240px;
}

这样也可以达到居中的目的，假说说元素没有设置一个显性高度或者本身不是IMG这类拥有自身高度的元素以外是不会垂直居中的，说白了还是给元素一个高度，也达不到自适应垂直居中的目的。所以还是来炒一下老饭，说不定还可以有不一样的味道。

table-cell

先来了解一下这个属性值，display:table-cell 这个属性等同 HTML中的td和th。假如指定，那么该值所在的元素显示效果等同td或者th标签的效果。在HTML中表单元格td和th都是生成一个个矩形框，这些框有内容，有内边距和边框，就是对外边距margin 不感冒,所以在表格当中设置一个表单元格外边距，其实是起不了作用的，demo→table中td以及元素table-cell设置margin

说到这里，提一下前辈们说的匿名表对象，在table标签中，假如我们只是写如下代码