1. 文本居中
首先編寫一個簡單的html代碼，設置一個類名為parentDiv的div對象。html代碼如下：
1 <div class="parentDiv"> 2 這里隨意填寫~... 3 </div>
1.1 實現文字水平居中（使用text-align）
對div.parentDiv設置text-align: center;來實現。CSS代碼如下：
1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100px; 6 border: 1px solid #ececec; 7 text-align:center; /*水平居中*/ 8 }
有些時候，你會發現即使使用了text-align: center;屬性，但是仍然沒有起到居中的作用。原因就在於div標簽本身沒有定義自己居中的屬性，而且這樣做對布局是非常不科學的方法。正確的設置方法其實很簡單就是給.parentDiv添加以下屬性：margin-left: auto;和margin-right: auto;即可。具體可看2.1。
注：在父級元素定義text-align: center;屬性的意思就是在父級元素內的內容居中；對於IE瀏覽器這樣設置就沒問題了，但在Mozilla瀏覽器中卻不行。解決辦法就是：在子元素定義設定時，再加上margin-left: auto;及margin-right: auto;就沒問題了。需要說明的是如果想用這個方法使整個頁面要居中，建議不要套在一個div里，可以依次拆出多個div，只要在每個拆出的div里定義margin-left: auto;及margin-right: auto;就行。
1.2 單行文本垂直居中（使用line-height）
文字在層中垂直居中使用vertical-align屬性是做不到的，所以這里有個比較巧的方法就是：設置height的高度與line-height的高度相同。CSS代碼如下：
1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100px; 6 border: 1px solid #ececec; 7 text-align:center; /* 水平居中 */ 8 line-height: 100px; /* line-height = height */ 9 }
1.3 文本垂直居中（使用vertical-align）
可以使用vertical-align實現垂直居中，不過vertical-align僅適用於內聯元素和table-cell元素，因此之前需要轉化。
1 [css] 2 3 .outerBox{ 4 width:200px; 5 height:100px; 6 border: 1px solid #ececec; 7 text-align:center; /* 水平居中 */ 8 display:table-cell; /*轉化成table-cell元素*/ 9 vertical-align:middle; /*垂直居中對齊，vertical-align適用於內聯及table-cell元素*/ 10 }
1.4 圖片垂直居中（使用background-position）
這里指的是背景方法，在div.parentDiv對象中使用background-position屬性。CSS代碼如下：
1 [css] 2 3 .parentDiv { 4 background: url(xxx.jpg) #ffffff no-repeat center; 5 }
注：關鍵就在於最后的center，這個參數定義圖片的位置。當然，background-position屬性還可以寫成“top left"或者"bottom right"等，也可以直接寫數值。
2. div居中
首先編寫一個簡單的html代碼，設置一個父div類名為parentDiv，再設置一個子div類名為childDiv。html代碼如下：
1 <div class="parentDiv"> 2 <div class="childDiv"></div> 3 </div>
實現parentDiv和childDiv父子div的盒子寬高背景色和邊框大小。CSS代碼如下：
1 [css] 2 3 * { 4 -webkit-box-sizing: border-box; /*Safari*/ 5 -moz-box-sizing: border-box; /*Firefox*/ 6 box-sizing: border-box; 7 } 8 9 .parentDiv { 10 width:400px; 11 height: 100px; 12 background-color: #00ff00; 13 margin: 20px; 14 } 15 16 .childDiv { 17 width: 200px; 18 height:50px; 19 background-color: #ff0000; 20 }
2.1 水平居中（使用margin:auto）
當div.childDiv對象擁有固定寬度時，設置水平方向margin為auto，可以實現水平居中。CSS代碼如下：
1 [css] 2 3 /*margin:auto實現水平居中，需要居中的div必須擁有固定的寬度*/ 4 .parentDiv .childDiv { 5 margin: 0 auto; 6 }
2.2 實現水平居中（使用text-align:center）
如果給子盒子div.childDiv設置display: inline-block不影響整體布局時，可以將子盒子轉化為inline-block，對父盒子設置text-align:center實現居中對齊。CSS代碼如下：
1 [css] 2 3 /* 4 text-align: center;實現水平居中 5 需要子盒子設置為display: inline-block; 6 */ 7 .parentDiv { 8 text-align: center; 9 } 10 11 .parentDiv childDiv { 12 display: inline-block; 13 }
2.3 table-cell元素居中
將父盒子設置為table-cell元素，可以使用text-align: center;和vertical-align: middle;實現水平、垂直居中。比較好的解決方案是利用三層結構模擬父子結構。html代碼如下：
1 <div class="parentDiv tableCell"> 2 <div class="id1"> 3 <div class="childDiv">tableCell</div> 4 </div> 5 </div>
CSS代碼如下：
1 [css] 2 3 /* 4 table-cell實現居中 5 將父盒子設置為table-cell元素，設置 6 text-align: center; vertical-align: middle; 7 子盒子設置為inline-block元素 8 */ 9 .tableCell { 10 display: table; 11 } 12 13 .tableCell .id1 { 14 display: table-cell; 15 text-align: center; 16 vertical-align: middle; 17 } 18 19 .tableCell .childDiv { 20 display: inline-block; 21 }
2.4 絕對定位居中（利用margin實現偏移）
將parentDiv對象設置為定位元素（利用position: relative;屬性），將childDiv對象設置為絕對定位，left和top均為50%，這時子盒子的左上角居中對齊，利用margin實現偏移。CSS代碼如下：
1 [css] 2 3 /*絕對定位實現居中*/ 4 .parentDiv { 5 position: relative; 6 } 7 8 .parentDiv .childDiv { 9 position: absolute; 10 left:50%; 11 top:50%; 12 margin-left:-100px; /*利用margin實現偏移,設置為寬度和高度的一半的負值*/ 13 margin-top:-25px; 14 }
2.5 絕對定位居中（利用transform實現偏移）
絕對定位方式與2.4類似，只不過利用transform中的translate實現偏移。CSS代碼如下：
1 [css] 2 3 /*絕對定位實現居中,transform偏移*/ 4 .parentDiv { 5 position: relative; 6 } 7 8 .parentDiv .childDiv { 9 position: absolute; 10 left:50%; 11 top:50%; 12 -webkit-transform: translate(-50%, -50%); 13 -moz-transform: translate(-50%, -50%); 14 -ms-transform: translate(-50%, -50%); 15 -o-transform:translate(-50%, -50%) ; 16 transform:translate(-50%, -50%); 17 }
2.6 絕對定位居中（利用margin:auto實現偏移）
同樣對子盒子實現絕對定位，這里使用top、right、bottom、left均為0，margin為auto實現偏移。CSS代碼如下：
1 [css] 2 3 /*絕對定位實現居中,margin:auto實現偏移*/ 4 .parentDiv { 5 position: relative; 6 } 7 8 .parentDiv .childDiv { 9 position: absolute; 10 left:0; /*top、right、bottom、left均為0*/ 11 top:0; 12 right: 0; 13 bottom: 0; 14 margin: auto; 15 }
2.7 Flexbox居中
使用彈性盒模型(flexbox)實現居中。CSS代碼：
1 [css] 2 3 /*flexbox實現居中*/ 4 .flexBox { 5 display: -webkit-box; /*Safari*/ 6 display: -moz-box; /*Firefox*/ 7 display: -ms-flexbox; /*IE*/ 8 display: -webkit-flex; /*Chrome*/ 9 display: flex; 10 -webkit-box-align: center; 11 -moz-box-align: center; 12 -ms-flex-align: center; 13 -webkit-align-items: center; 14 align-items: center; 15 -webkit-box-pack: center; 16 -moz-box-pack: center; 17 -ms-flex-pack: center; 18 -webkit-justify-content: center; 19 justify-content: center; 20 }