1. 文字居中

首先編寫一個簡單的html程式碼，設定一個類名為parentDiv的div物件。html程式碼如下：

複製程式碼 程式碼如下:
<div class="parentDiv">
這裡隨意填寫~...
</div>

.1 實現文字水平居中（使用text-align）

對div.parentDiv設定text-align: center;來實現。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /*水平居中*/
}

有些時候，你會發現即使使用了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程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
line-height: 100px; /* line-height = height */
}

1.3 文字垂直居中（使用vertical-align）

可以使用vertical-align實現垂直居中，不過vertical-align僅適用於內聯元素和table-cell元素，因此之前需要轉化。

複製程式碼 程式碼如下:
[css]</p>< p>.outerBox{
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
display:table-cell; /*轉化成table-cell元素*/
vertical-align:middle; /*垂直居中對齊，vertical-align適用於內聯及table-cell元素*/
}

1.4 圖片垂直居中（使用background-position）

 這裡指的是背景方法，在div.parentDiv物件中使用background-position屬性。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]
parentDiv {
background: url(xxx.jpg) #ffffff no-repeat center;
}

注：關鍵就在於最後的center，這個引數定義圖片的位置。當然，background-position屬性還可以寫成“top left"或者"bottom right"等，也可以直接寫數值。

2. div居中

首先編寫一個簡單的html程式碼，設定一個父div類名為parentDiv，再設定一個子div類名為childDiv。html程式碼如下：

複製程式碼 程式碼如下:
<div class="parentDiv">
<div class="childDiv"></div>
</div>

實現parentDiv和childDiv父子div的盒子寬高背景色和邊框大小。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]

* {
-webkit-box-sizing: border-box; /*Safari*/
-moz-box-sizing: border-box; /*Firefox*/
box-sizing: border-box;
}

.parentDiv {
width:400px;
height: 100px;
background-color: #00ff00;
margin: 20px;
}

.childDiv {
width: 200px;
height:50px;
background-color: #ff0000;
}

2.1 水平居中（使用margin:auto）

當div.childDiv物件擁有固定寬度時，設定水平方向margin為auto，可以實現水平居中。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]
/*margin:auto實現水平居中，需要居中的div必須擁有固定的寬度*/
parentDiv .childDiv {
margin: 0 auto;
}

2.2 實現水平居中（使用text-align:center）

如果給子盒子div.childDiv設定display: inline-block不影響整體佈局時，可以將子盒子轉化為inline-block，對父盒子設定text-align:center實現居中對齊。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>/*
text-align: center;實現水平居中
需要子盒子設定為display: inline-block;
*/
.parentDiv {
text-align: center;
}</p>< p>.parentDiv childDiv {
display: inline-block;
}

2.3 table-cell元素居中

將父盒子設定為table-cell元素，可以使用text-align: center;和vertical-align: middle;實現水平、垂直居中。比較好的解決方案是利用三層結構模擬父子結構。html程式碼如下：

複製程式碼 程式碼如下:
<div class="parentDiv tableCell">
<div class="id1">
<div class="childDiv">tableCell</div>
</div>
</div>

CSS程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>/*
table-cell實現居中
將父盒子設定為table-cell元素，設定
text-align: center; vertical-align: middle;
子盒子設定為inline-block元素
*/
.tableCell {
display: table;
}</p>< p>.tableCell .id1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}</p>< p>.tableCell .childDiv {
display: inline-block;
}

2.4 絕對定位居中（利用margin實現偏移）

將parentDiv物件設定為定位元素（利用position: relative;屬性），將childDiv物件設定為絕對定位，left和top均為50%，這時子盒子的左上角居中對齊，利用margin實現偏移。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>/*絕對定位實現居中*/
.parentDiv {
position: relative;
}</p>< p>.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
margin-left:-100px; /*利用margin實現偏移,設定為寬度和高度的一半的負值*/
margin-top:-25px;
}

2.5 絕對定位居中（利用transform實現偏移）

絕對定位方式與2.4類似，只不過利用transform中的translate實現偏移。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>/*絕對定位實現居中,transform偏移*/
.parentDiv {
position: relative;
}</p>< p>.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform:translate(-50%, -50%) ;
transform:translate(-50%, -50%);
}

2.6 絕對定位居中（利用margin:auto實現偏移）

同樣對子盒子實現絕對定位，這裡使用top、right、bottom、left均為0，margin為auto實現偏移。CSS程式碼如下：

複製程式碼 程式碼如下:
[css]</p>< p>/*絕對定位實現居中,margin:auto實現偏移*/
.parentDiv {
position: relative;
}</p>< p>.parentDiv .childDiv {
position: absolute;
left:0; /*top、right、bottom、left均為0*/
top:0;
right: 0;
bottom: 0;
margin: auto;
}

2.7 Flexbox居中

使用彈性盒模型(flexbox)實現居中。CSS程式碼：

複製程式碼 程式碼如下:
[css]</p>< p>/*flexbox實現居中*/
.flexBox {
display: -webkit-box; /*Safari*/
display: -moz-box; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: -webkit-flex; /*Chrome*/
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}