table

 最近在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標簽中，假如我們只是寫如下代碼