1. 塊級元素居中
塊級元素的寬度預設是父元素寬度。
以div為例，進行測試：
(1)div放在body中，設定了寬度和高度，背景顏色
html:
div在父元素中居中
(2)css中設定div其text-align: center;結果顯示，是div元素裡面的內容在div中居中。
(3)那這樣說，對於div本身這個元素，就想到盒模型啦
所以方法一：
水平居中：margin-left：auto；margin-right：auto；當然也可以寫做margin：0 auto；
垂直居中：估量著margin-top：200px;
或者最開始就寫：
margin：200px auto；
好啦，有人說用vertical-align: middle;不就垂直居中啦！可是你會發現沒有效果！
vertical-align 屬性設定元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊（那麼應該是vertical-align對行內元素有效
，對塊級元素無效吧）。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。
即給乙個**的td加乙個vertical-align:middle的樣式，**裡面的內容會垂直居中，同樣的如果給乙個vertical-align:bottom就會底部對齊，如果給乙個vertical-align:top就會頂部對齊。
其值：
baseline 預設。元素放置在父元素的基線上。
sub 垂直對齊文字的下標。
super 垂直對齊文字的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字型的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字型的底端對齊。
length
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
其使用：
1.用於內聯元素
下面以影象的垂直對齊為例子說明一下vertical-align屬性的用法。
2.用於**
vertical-align屬性可以直接用於**單元格，效果相當於html中的valign屬性。
td這是乙個測試
這是乙個測試
這是乙個測試
這是乙個測試
3.用於塊元素
vertical-align屬性是不適用於塊元素的，這就是為什麼有些人使用vertical-align屬性無效的原因。但是我們可以使用display屬性，設定其值為table-cell，將塊元素轉化為單元格，然後再使用vertical-align屬性。
需要注意的是，上面這種方法是存在相容性問題的。ie6/ie7以及以ie為核心的瀏覽器如世界之窗、360、遨遊等瀏覽器不支援這種用法，而chrome、火狐卻能支援。
為了相容ie6/7可以為div新增以下屬性
div方法二：
用定位，算邊距唄
div#center
2.如何讓文字垂直居中顯示，就是使用line-height，將line-height值與外部標籤盒子的高度值設定成一致就可以了。
即line-height和height值相同。
其他可參考講了塊級和內聯居中的問題。