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"等，也可以直接寫數值。