css 實現div 內容垂直置中

一、單行內容的置中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設定 line-height 和 height，並使兩值相等，再加上 over-flow: hidden 就可以了:
.middle-demo-1{
   height: 4em;
   line-height: 4em;
   overflow: hidden;
}

優點：
1. 同時支援塊級和內聯極元素
2. 支援所有瀏覽器
缺點：
1. 只能顯示一行
2. IE6中不支援<img>等的置中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的布局的話，overflow: hidden 一定要

 如果還想讓div裡的文字水平置中，加上“text-align:center;”即可；代碼如下：

      說明：如果在父級元素定義text-align:center;這個的意思就是在父級元素內的內容置中；對於IE這樣設定就已經可以了。但在mozilla中不能置中。解決辦法就是在子項目定義時候設定時再加上“margin-right:auto; margin-left:auto;”。但如果文檔的doctype 都採用 xhtml Transitional 模式的話，都可採用後者就行。

二、多行內容置中，且容器高度可變
也很簡單，給出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
   padding-top: 24px;
   padding-bottom: 24px;
}

優點：
1. 同時支援塊級和內聯極元素
2. 支援非常值內容
3. 支援所有瀏覽器
缺點：
容器不能固定高度

三、如何使圖片在DIV中垂直置中，
可以用背景的方法。如下：
<div id="loading" style="border:1px solid #FFD47F;width:80px;height:40px;text-align:center;background:url(ajax-loader.gif) no-repeat center;">
</div>
     關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top  left”(左上方)或者"bottom right"等，也可以直接寫數值"50 30"。