css點滴2—六種方式實現元素水平居中

本文參考文章《六種方式實現元素水平居中》

元素水平居中的方法，最多見的莫過於給元素一個顯式的寬度，而後加上margin的左右值爲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 a {
            display: block;
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
            background: linear-gradient(to top,#434345,#2f3032);
            text-decoration: none;
        }
        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
            background: linear-gradient(to top,#f48b03,#c87100);
        }
        li {
            list-style: none;
        }

效果：

這顯然不是咱們想要的效果，接下來咱們分幾種方案來實現水平居中。下面css代碼咱們只貼出關鍵代碼。

1.margin和width實現水平居中

第一種方式是最古老的實現方案，也是最多見的，在分頁容器上定義一個寬度，而後配合margin的左右值爲「auto」實現效果。

css代碼：

        .pagination li {
            line-height: 25px;
            list-style: none;
            display: inline;
            float: left;
            margin: 0 5px;
        }
        /*!*給容器一個寬度*!*/
        .pagination {
            width: 500px;
            margin-left: auto; /**/
            margin-right: auto;
        }

效果：

 

 

 效果是實現了，可是擴展性不必定強。這種方式顯示了5個分頁和首頁，末頁共7個顯示項，每每咱們沒法知道到底要顯示多少個分頁項，沒法肯定每一個分頁項的寬度是多少，也就沒法肯定容器的寬度。

缺點：這種方法簡單易懂，瀏覽器兼容性強，可是擴展性差，須要肯定容器寬度，沒法自適應未知狀況。

2.inline-block實現水平居中

這種方式使用inline-block和text-align:center結合起來實現水平居中。父標籤設置text-align:center，文本居中，子組件設置display:inline-block，行內元素。

css代碼：

.pagination{
            text-align: center;
            font-size: 0;
            letter-spacing: -4px;
            word-spacing: -4px;
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            display: inline-block;
            *display: inline;
            zoom: 1;
            letter-spacing: normal;
            word-spacing: normal;
            font-size: 12px;
        }

效果：

 

 

 這種方法相對來講簡單，可是使用inline-block實現了水平居中的問題，卻又產生了一個新的問題，就是分頁項之間的回車符帶來的空白間距，這個間距也不是全部瀏覽器都會有，因此要解決下inline-block帶來的間距，詳細解決方法參考《如何解決inline-block元素的空白間距》

缺點：這種方法簡單易懂，擴展性強，可是須要額外處理自組建中inline-block的空白間距。

3.浮動實現水平居中

float浮動要麼考左，要麼靠右，沒有居中選項，其實只要略加處理就能夠了。整體來講就是容器寬度100%，向右浮動50%，子元素向左浮動50%，而且都相對定位。

css代碼：

        .pagination {
            float: left; /*分頁容器浮動到左邊*/
            width: 100%; /*分頁容器寬度爲100%*/
            overflow: hidden;
            position: relative; /*相對正常位置定位*/
        }
        .pagination ul {
            clear: left;
            float: left; /*內部容器浮動到左邊*/
            position: relative; /*相對正常位置定位*/
            left: 50%; /* 整個內部容器向右邊移動寬度的50% */
            text-align: center;
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            display: block;
            float: left; /*每一個分頁也浮動到左邊*/
            position: relative; /*相對正常位置定位*/
            right: 50%; /* 每一個分頁項向左移動寬度的50% */
        }

效果：

這種方法和前面的都不一樣，使用浮動float配合position:relative相對自身定位來實現，下面的文章介紹了這種方法的實現原理《Horizontally Centered Menus with no CSS hacks》

div是一個塊元素，其默認寬度是100%，如圖所示：

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

接下來使用傳統的製做方法，讓導航浮動到左邊，並且每一個分頁也進行浮動

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

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

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

缺點：這種方式實現的兼容性強，擴展性強，可是實現原理比較複雜。

4.絕對定位實現水平居中

絕對定位實現水平居中，元素絕對定位：「position:absolute;」，向右移動50%：「left:50%;」 ,設置固定寬度：「width:寬度值;」，設置左外邊距爲寬度值的一半：「margin-left:-(寬度值/2);」，代碼以下：

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

可是這種作法有一個缺點，大多數狀況下咱們不知道元素的寬度，或者元素寬度是不固定的，可是咱們能夠在第三種方法的基礎上作一點變通：容器絕對定位，左偏移50%，子元素相對定位，右浮動，右偏移50%
css代碼：

        .pagination {
            position: relative; /*div相對定位*/
        }
        .pagination ul {
            position: absolute; /*分頁容器絕對定位*/
            left: 50%; /*分頁容器向右移動50%*/
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            position: relative; /*分頁元素相對定位，注意這裏不是absolute*/
            float: left; /*分頁元素浮動在右邊*/
            right: 50%; /*分頁元素向左移動50%*/
        }

效果：

 

 缺點：這種方式擴展性強，兼容性強，可是理解起來比較難。

5.css3的flex實現水平居中

css3的flex是一個很強大的功能，能讓佈局變得靈活方便，惟一的缺點就是目前兼容性差。父元素flux佈局，box-pack：center，box-origt:center，橫向排列。

css代碼：

        .pagination{
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            display: -moz-box;
            -moz-box-orient: horizontal;
            -moz-box-pack: center;
            display: -o-box;
            -o-box-orient: horizontal;
            -o-box-pack: center;
            display: -ms-box;
            -ms-box-orient: horizontal;
            -ms-box-pack: center;
            display: box;
            box-orient: horizontal;
            box-pack: center;

        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
        }

效果：

 

 缺點：這種方法實現起來比較便捷，擴展性強，可是兼容性比較差。

6.css3的fit-content實現水平居中

這種實現居中的方法參考《Horizontal centering using CSS fit-content value》。「fit-content」是給css的「width」屬性增長一個with:fit-content，表示縮小到內容寬度，再配合margin:auto能夠輕鬆的實現水平居中的效果。

        .pagination ul {
            width: -moz-fit-content;
            width: -webkit-fit-content;
            width: fit-content; /*給with屬性值設置爲fit-content*/
            margin: 0 auto;
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
        }

效果：

 

 缺點：這種方式簡單易懂，擴展性強，缺點是兼容性差。