給出基本布置**及效果圖
html：
>
"gfather"
>
"father"
>
class
="child"
>
>
test 文字span
>
div>
div>
>
hahahaha
div>
div>
>
hahahaha
div>
body
>
css：
我們考慮id=gfather的div和id=father的div。（藍色和紫色的方框）
1.1 水平居中
塊級元素的居中十分方便，只需乙個margin: 0 auto;即可。
#father
1.2 垂直居中
1.2.1 如果需要被居中的子元素寬高已知
這種情況可以「子絕父相」，通過定位先left、top各偏移50%，使子元素左上角到達中間位置。而後通過margin設定負屬性值來調整**，這個負屬性值需要我們人工計算。
可能會有人想這樣實現，通過將margin值也設定為負值百分比來達到目的，但這不可行。
margin的百分比值雖然也是參照其父元素的寬高的，但它無法解決我們的問題，因為它只會參照寬度（或高度）一種。
詳細介紹可以自己找，這裡是其中一篇：
1.2.2 如果需要被居中的子元素寬高未知（可變）
這種情況下的實現顯然適用範圍更廣一些。
方法一
#gfather
#father
仍才採用先偏移百分之50，再倒回去一部分的思想。採用css3
#gfather
#father
方法三（這種方法如果直接加入上面**，會導致寬高百分比被破壞，如果父元素已知固定大小可以用。）
#gfather
#father
#gfather
#father
以id=child的div和內部的span為例。（綠色框 與 黃色背景的文字）
2.1 水平居中
只需設定乙個屬性
text-align: center;
.child
2.2.1 單行文字居中
設定文字行高等於所在區域高度
來自網路
這裡的缺陷就在於，仍然需要人工計算所在區域（這裡是div）高度。
如果父元素設定的是百分比，則無法很好地處理。
2.2.2 多行文字居中
父級元素高度不固定
只能通過內部文字撐開。
通過設定填充物（padding），把文字擠到中間，使它們看起來居中。設定padding的top和bottom要相等。
注意，這裡也只能設定px值。
而padding和margin相似，設定百分比只會參考寬（高）一種，同樣無法完成之前在margin那裡一樣的設想。
父級元素高度固定
css中的vertical-align屬性，結合display: table把div模擬成table屬性。
因此設定父級div的display屬性：display: table;
然後新增乙個div包含span文字，設定其display:table-cell;和vertical-align:middle;
同上文塊級的垂直居中類似。
若有錯誤或更好的實現方式，還望指正。
CSS居中整理
由於最近用到css居中應用，網上資料過多，然後關於居中的技巧有很多，就先總結下方便後續忘記了，好回憶檢視。行內元素 1.詳情見 width 800 height 265 scrolling no title css line level center src allowfullscreen true...
CSS 居中問題
text align center margin auto div height 100px line height 100px 使用插入table 包括tbody tr td 標籤，同時設定vertical align middle 看我是否可以居中 看我是否可以居中 看我是否可以居中 看我是否可...
CSS居中問題
1.左浮後，想居中 給他 爸爸 居中，如果沒有寬度，不能用 margin 0 auto 可以用text align center 2.繼1，如果 爸爸 也沒有確定的寬，想變窄 爸爸 只能也變成display inline block 3.把margin設為auto 具體來說就是把要居中的元素的mar...