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 地址。