css中水平垂直置中對齊布局一些執行個體總結

水平置中，如果知道元素的寬度，則可以使用

代碼如下	複製代碼
.cell{width:300px; margin:0 auto; text-align:center;}

如果是內嵌元素置中，那麼直接用text-align:center則行

如果未知元素寬度，並且非內嵌元素，那麼下面給出的幾種方案也適合你。

用CSS來實現元素的垂直置中效果是件苦差事，雖然說實現方法有多種，但有很多方式在某些瀏覽器下可能無法正常的工作。接下來我們就一起來看看這些不同方法實現垂直置中的各自優點和其不足之處。

方法一：
這種方法用來實現單行垂直置中是相當的簡單的，你只要保證元素內容是單行，並且其高度是固定不變的，你只要將其“line-height”設定成和“height”值一樣就Ok了。不過這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。

Html Markup

代碼如下	複製代碼
<div class="vertical">content</div>    CSS Code:     .vertical {      height: 100px;      line-height: 100px;/*值等於元素高度的值*/     }

   優點：

適合在所有瀏覽器，沒有足夠空間時，內容不會被切掉

缺點：

僅適合應用在文本和圖片上，並且這種方法，當你文本不是單行時，效果極差，差到讓你感到噁心。

這種方法對運用在小元素上是非常有用的，比如說讓一個button、圖片或者單行文字欄位

第一種：相對定位法

原理是父類浮動的同時向左left:50%,而子類則向左浮動的同時left:50%;

代碼如下

複製代碼

<style type="text/css"> .centerlist {position:relative;left:50%;float:left;} .centerlist li {position:relative;right:50%; z-index:2;float:left} </style> <ul class="centerlist">     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li>     <li><a href="#">Lorem ipsum dolor.</a></li> </ul>

第二種：強制內聯

代碼如下	複製代碼
<style type="text/css"> .centerlist_inline{text-align: center;} .centerlist_inline li{display: inline;} </style> <ul class="centerlist_inline"> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> </ul>

局限：區塊層級元素改為內嵌元素，那麼高度、寬度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。

第三種： 使用inline-block

如果大家看過我之前寫的inline-block替換float可能就會清楚這個屬性的好處

代碼如下	複製代碼
<style type="text/css"> .centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px;} .centerlist_inline-block li{display: inline-block; *display: inline; *zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;} </style> <ul> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> </ul>

第四種

 

代碼如下	複製代碼
<style type="text/css"> .centerlist_table-cell{display:table; margin:0 auto;} .centerlist_table-cell{display:table-cell;} </style> <ul class="centerlist_table-cell"> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> <li><a href="">lorem1</a></li> </ul>

缺點是不相容ie6，ie7

推薦使用inline-block這種水平置中的方法，既保留了區塊層級元素特性，而且完美相容。就是代碼有點多。另外你還可以使用表格的方式來水平置中。

說完了水平置中，下面說垂直置中。

如果元素是內嵌元素，並且只有一行，則我們可以通過line-height來設定與其高度同樣大小，則實現了垂直置中了。

多行文字的水平垂直置中

一、大小不固定，多行文字的垂直置中

① 單行文字
可能很多人都知道如何讓單行文字垂直置中顯示，就是使用line-height，將line-height值與外部標籤盒子的高度值設定成一致就可以了。例如如下css代碼：height:3em; line-height:3em; ……
顯示結果如下圖：

單行文本垂直置中對齊

② 多行文字
如何?父容器高度固定，文字可能一行，兩行或更多行的垂直置中對齊呢。
實現的關鍵是把文字當圖片處理。用一個span標籤將所有的文字封裝起來，設定文字與圖片相同的display屬性（inline-block屬性），然後用處理圖片垂直置中的方式處理文字的垂直置中即可。
核心css代碼如下，
外部div標籤：

代碼如下	複製代碼
div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

內部span標籤：

代碼如下	複製代碼
span{display:inline-block; font-size:0.1em; vertical-align:middle;}

行數不固定文字垂直置中對齊
有幾點簡要說明：
1.此例子用em做單位，如果您對em單位瞭解不夠，把握不來的話，可以使用px做單位，值要換；
2.外部div不能使用浮動；
3.外部div高度和文字大小比例1.14為宜；
4.內部標籤的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己試了一下，高度比字型1.5左右的樣子；
5.系統原因，我沒能夠在IE8下測試。

實現的最終效果和JavaScript示範，您可以狠狠地點擊這裡去看看。

二、大小不固定，圖片的水平垂直置中

① 透明gif圖片+背景定位的方法
這裡利用了background-position:center實現圖片置中顯示。這是個很實用也是很聰明的辦法，對於維護控製成本都很不錯。微軟必應圖片搜尋的圖片排列就是使用的這種方法。
方法的原理很簡單，使用一個透明的gif圖片做覆蓋層，高寬展開至所需要的大小，然後給這個gif圖片一個background- position:center center的屬性。而background-image建議寫在頁面上，因為實際項目中，這肯定是個動態URL地址，css檔案似乎不支援動態URL 地址。下面就是執行個體示範頁面的效果截圖