【css系列】六種實現元素水平居中方法

1、前言

居中效果在CSS中非常普通的效果，平時你們所看到的居中效果主要分爲三大類：水平居中、垂直居中和水平垂直居中。而其中水平居中相對於後二者來講要簡單得多。使用了css3的flexbox的屬性輕鬆實現多行文本水平垂直居中的方法。固然你們有可能認爲這些方法對於瀏覽嘎嘎的兼容性處理太麻煩了。

 

2、六種方法

常見的居中是固定寬度，加上margin: 0 auto。可是若是寬度不明確，咱們也要嘗試一下。

咱們來實現一個分頁容器

html

<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next</a></li> </ul> </div>

css

.pagination li{
    line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

展現：

 

一、方法一：margin和width實現

這個是最多見的方案：在容器上定義一個固定的寬度，而後配合margin左右的值爲auto。

css

.pagination{
    width: 340px; margin: 0 auto;
}
.pagination li{
    line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

展現

效果實現了，擴展性不強，由於寬度沒法肯定，也就沒法肯定容器寬度。

優勢：實現簡單，瀏覽器兼容性強

缺點：擴展性差，沒法自適應未知狀況。

 

二、方法二：inline-block和父元素text-align

僅inline-block屬性是沒法讓元素水平居中，他的關鍵之處要在元素的父容器中設置text-align的屬性爲「center」，這樣才能達到效果：

body{
    background: #000; text-align: center; } .pagination{ margin-top: 50px; display: inline-block; } .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

顯示

這個方法也是比較簡單易懂，inline-block解決了水平居中的問題，可是又有一個新的問題--空白間距，因此須要解決inline-block帶來的間距。

優勢：簡單易懂，擴展性強

缺點：須要額外處理inline-block的瀏覽器兼容性問題

 

三、方法三：浮動實現水平居中

感到很意外，元素都浮動了，他還能水平居中？你們都知道，浮動要麼靠左、要麼靠右，還真少見有居中的。其實略加處理就有了。

body{
    background: #000; } .pagination{ margin-top: 50px;  float: left; width: 100%; } .pagination ul{ position: relative; float: left; left: 50%; } .pagination li{ line-height: 25px; list-style: none; display: inline;float: left;  position: relative; right: 50%; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

展現：

 

沒有浮動的div：你們都知道div是一個塊元素，其默認的寬度就是100%，如圖所示：

若是div設置了浮動以後，他的內容有多寬度就會撐開有多大的容器（除顯式設置元素寬度值以外），這也是咱們實現讓分頁導航居中的關鍵所在：

接下來使用傳統的製做方法，咱們會讓導航浮動到左邊，並且每一個分頁項也進行浮動，就以下圖所示同樣：

如今要想的辦法是讓分頁導航居中的效果了，在這裏是經過「position:relative」屬性實現，首先在列表項「ul」上向右移動50%（left:50%;），看到以下圖所示：

整個分頁向右移動了50%的距離，緊接着咱們在「li」上也定義「position:relative」屬性，但其移動的方向和列表「ul」移動的方向恰好是反方向，而其移動的值保持一致：

這樣一來就實現了float浮動居中的效果。

優勢：兼容性強，擴展性強。

缺點：實現原理比較複雜

 

四、方法四：絕對定位實現

絕對定位實現水平居中，我想你們也很是的熟悉了，而且用得必定很多。

.ele {
	position: absolute;
	width: 寬度值;
	left: 50%; margin-left: -(寬度值/2); } 

但這種實現咱們有一個難題，我並不知道元素的寬度是多少，這樣也就存在如方法一所說的難題，但咱們能夠藉助方法三作一點變通：

body{
    background: #000; margin-top: 50px; } .pagination ul{  position: absolute; left: 50%; } .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; position: relative; right: 50%; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

展現：

優勢：擴展性強，兼容性強;

缺點：理解性難。

 

五、方法五：css3的flex實現

能讓咱們的佈局變得更加靈活與方便，惟一的就是目前瀏覽器的兼容性較差。那麼第五種方法，咱們就使用flex來實現。

body{
    background: #000; margin-top: 50px; } .pagination{  display: flex; justify-content: center; } .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

展現：

優勢：實現簡單，擴展性強

缺點：兼容性差

 

六、方法六：css3的fit-content

「fit-content」是CSS中給「width」屬性新加的一個屬性值，他配合margin可讓我輕鬆的實現水平居中的效果：

body{
    background: #000; margin-top: 50px; } .pagination{  width: fit-content; margin: 0 auto; } .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }

展現：

優勢：簡單易懂，擴展性強

缺點：瀏覽器兼容性差

 

3、參考

一、http://www.w3cplus.com/css/elements-horizontally-center-with-css.html