在網頁開發中，經常會有巢狀元素中將子元素居中的要求。下邊將五種常用的居中方法進行總結。
1：原始圖（父子元素無border，無padding）：
2：實現居中效果：
一：使用margin進行固定長度的偏移
在使用margin進行具體高度的偏移時，需要知道父元素和子元素的具體的寬高尺寸
1：水平方向居中
在進行水平方向上的居中時，可對子元素樣式使用
margin:0 auto;
2：垂直方向居中
在使用margin進行垂直方向上的居中時，至少要滿足三個條件中的一條才能達到垂直居中的效果，否則子元素和父元素會一同被帶下來。這涉及到margin的合併，在我的另一篇部落格《關於盒子模型中margin疊加現象的歸類與思考》中我對這個現象經過查閱資料和實驗做出了個人的推斷理解。三種前提條件分別是：
1.為父元素設定border；
2.為父元素設定padding；
3.在父元素中新增overflow：hidden的樣式。（在標準盒子模型中前兩種會將盒子模型的既定尺寸擴充，在沒必要設定padding和border時不建議使用前兩種方法。）。
/*關鍵樣式***/
#father
#son
缺點：在進行垂直居中時你需要明確父元素的height，並且進行計算，如果父元素的高度變了，子元素將不再垂直居中，還要再修改資料，維護性極差。
二;使用絕對定位並進行偏移
1.首先需要將父元素樣式設定position：relative；
2.將子元素樣式設定position：absolute；
3.使用left和top進行定位實現居中；
注意：只有在元素使用position：relative/absolute/fixed才能使用top/left/bottom/right/z-index屬性，同時元素的float，clear會失效。
/*關鍵樣式***/
#father
#son
/*優化**（使用css樣式中的計算公式）*/
#son
這裡寫描述
這裡寫描述
缺點：在使用left/top進行偏移50%之後，再使用margin-top/left偏移回子元素的一半。這就需要明白子元素的具體的尺寸，當子元素的尺寸有改變時，布局就會被破壞，維護性也極差。
三：使用絕對定位並margin自適應進行居中
1.首先需要將父元素樣式設定position：relative；
2.將子元素樣式設定position：absolute；
3.將left/top/bottom/right：0；
4.margin：auto；
/*關鍵樣式***/
#father
#son
優點：維護性高，不需要知道父子元素的具體尺寸也可以實現居中的效果。
四: 使用table-cell進行居中顯示
/*關鍵樣式***/
#father
#son
注意：父容器的設定display: table-cell;後，如果想要將父容器本身使用margin居中無法達到效果，因為margin對display為table-cell的無效。涉及到table的樣式相對較為複雜，所以不建議使用。
五：使用彈性盒子來實現居中
css3中提供了一種響應式布局的方案：彈性盒子。他可以適應不同螢幕的大小和不同的裝置型別。同時，它也提供了更加有效地方式來對容器的子元素進行排列和對齊，以及分配剩餘空白空間。但是由於現在彈性盒子是css3的新的布局模式，所以有些瀏覽器還沒有相容，需要新增一些瀏覽器字首，以達到相容的效果。
/關鍵樣式**/
#father優點：維護性高，而且彈性盒子可以完成浮動和定位所能達到的效果，而且相當的簡便。
Html 元素水平居中方案總結
先來看我乙個簡單xhtml html檔案 部分 我們的目的是讓 container水平居中。lorem ipsum dolor sit amet,consectetuer adipiscing elit.phasellus varius eleifend.使用自適應邊界 auto margin 水平...
html 元素水平居中方式
本文將簡單敘述元素居中的基本方法。區 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title center title 67 head 8 body 9 h1 style text align center html中元素的...
Html5 CSS之元素的五大居中方式
你是不是也對元素居中的知識點很是模糊？是不是苦於找不到乙個總結的通俗易懂的說明？是不是自己懶得去總結？恭喜你，搜到這篇部落格！這是鄙人在前端的學習與實踐中總結出的元素的五大居中方式，黏貼了 並對 做了解釋，希望對迷茫的有所幫助！下面的居中示例中，統一使用了同乙個div作為父元素和p作為子元素 設定乙...