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

saucxs發表於2019-07-23
CSS

一、前言

居中效果在CSS中很是普通的效果，平時大家所看到的居中效果主要分為三大類：水平居中、垂直居中和水平垂直居中。而其中水平居中相對於後兩者來說要簡單得多。使用了css3的flexbox的屬性輕鬆實現多行文字水平垂直居中的方法。當然大家有可能認為這些方法對於瀏覽嘎嘎的相容性處理太麻煩了。

 

二、六種方法

常見的居中是固定寬度，加上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;
}

展示：

 

1、方法一：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;
}

展示

效果實現了，擴充套件性不強，因為寬度無法確定，也就無法確定容器寬度。

優點：實現簡單，瀏覽器相容性強

缺點：擴充套件性差，無法自適應未知情況。

 

2、方法二：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的瀏覽器相容性問題

 

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

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

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浮動居中的效果。

優點：相容性強，擴充套件性強。

缺點：實現原理比較複雜

 

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

絕對定位實現水平居中，我想大家也非常的熟悉了，並且用得一定不少。

.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;
}

展示：

優點：擴充套件性強，相容性強;

缺點：理解性難。

 

5、方法五：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;
}

展示：

優點：實現簡單，擴充套件性強

缺點：相容性差

 

6、方法六：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;
}

展示：

優點：簡單易懂，擴充套件性強

缺點：瀏覽器相容性差

 

三、參考

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

 

相關文章