css點(diǎn)滴2—六種方式實(shí)現(xiàn)元素水平居中

元素水平居中的方法，最常見的莫過于給元素一個(gè)顯式的寬度，然后加上margin的左右值為auto。這種方式給固定寬度的元素設(shè)置居中是最方便不過的。但是很多情況下，無法確定容器寬度，這里我們討論一下這些問題。

為了更好說明問題，我們看一個(gè)制作分頁效果的代碼：

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

效果：

這顯然不是我們想要的效果，接下來我們分幾種方案來實(shí)現(xiàn)水平居中。下面css代碼我們只貼出關(guān)鍵代碼。

1.margin和width實(shí)現(xiàn)水平居中

第一種方式是最古老的實(shí)現(xiàn)方案，也是最常見的，在分頁容器上定義一個(gè)寬度，然后配合margin的左右值為“auto”實(shí)現(xiàn)效果。

css代碼：

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

效果：

效果是實(shí)現(xiàn)了，但是擴(kuò)展性不一定強(qiáng)。這種方式顯示了5個(gè)分頁和首頁，末頁共7個(gè)顯示項(xiàng)，往往我們無法知道到底要顯示多少個(gè)分頁項(xiàng)，無法確定每個(gè)分頁項(xiàng)的寬度是多少，也就無法確定容器的寬度。

缺點(diǎn)：這種方法簡(jiǎn)單易懂，瀏覽器兼容性強(qiáng)，但是擴(kuò)展性差，需要確定容器寬度，無法自適應(yīng)未知情況。

2.inline-block實(shí)現(xiàn)水平居中

這種方式使用inline-block和text-align:center結(jié)合起來實(shí)現(xiàn)水平居中。父標(biāo)簽設(shè)置text-align:center，文本居中，子組件設(shè)置display:inline-block，行內(nèi)元素。

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

效果：

這種方法相對(duì)來說簡(jiǎn)單，但是使用inline-block實(shí)現(xiàn)了水平居中的問題，卻又產(chǎn)生了一個(gè)新的問題，就是分頁項(xiàng)之間的回車符帶來的空白間距，這個(gè)間距也不是所有瀏覽器都會(huì)有，所以要解決下inline-block帶來的間距，詳細(xì)解決方法參考《如何解決inline-block元素的空白間距》

缺點(diǎn)：這種方法簡(jiǎn)單易懂，擴(kuò)展性強(qiáng)，但是需要額外處理自組建中inline-block的空白間距。

3.浮動(dòng)實(shí)現(xiàn)水平居中

float浮動(dòng)要么考左，要么靠右，沒有居中選項(xiàng)，其實(shí)只要略加處理就可以了。總體來說就是容器寬度100%，向右浮動(dòng)50%，子元素向左浮動(dòng)50%，并且都相對(duì)定位。

css代碼：

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

效果：

這種方法和前面的都不同，使用浮動(dòng)float配合position:relative相對(duì)自身定位來實(shí)現(xiàn)，下面的文章介紹了這種方法的實(shí)現(xiàn)原理《Horizontally Centered Menus with no CSS hacks》

div是一個(gè)塊元素，其默認(rèn)寬度是100%，如圖所示：

如果給div設(shè)置了浮動(dòng)之后，他的內(nèi)容有多寬就會(huì)撐開多大的容器（除顯式設(shè)置元素寬度值之外），這也是讓分頁導(dǎo)航居中的關(guān)鍵：

接下來使用傳統(tǒng)的制作方法，讓導(dǎo)航浮動(dòng)到左邊，而且每個(gè)分頁也進(jìn)行浮動(dòng)

現(xiàn)在要想的辦法是讓分頁導(dǎo)航居中的效果，這里是通過“position:relative”屬性實(shí)現(xiàn)，首先在列表項(xiàng)ul上向右移動(dòng)50%（left:50%），如下圖：

如上圖一樣整個(gè)分頁容器向右移動(dòng)了50%的距離，接著我們?cè)凇發(fā)i”上也定義“position:relative”屬性，但其移動(dòng)方向和列表“ul”移動(dòng)方向剛好相反，而且移動(dòng)值保持一致，也是50%：

這樣就實(shí)現(xiàn)了float浮動(dòng)居中的效果。

缺點(diǎn)：這種方式實(shí)現(xiàn)的兼容性強(qiáng)，擴(kuò)展性強(qiáng)，但是實(shí)現(xiàn)原理比較復(fù)雜。

4.絕對(duì)定位實(shí)現(xiàn)水平居中

絕對(duì)定位實(shí)現(xiàn)水平居中，元素絕對(duì)定位：“position:absolute;”，向右移動(dòng)50%：“l(fā)eft:50%;” ,設(shè)置固定寬度：“width:寬度值;”，設(shè)置左外邊距為寬度值的一半：“margin-left:-(寬度值/2);”，代碼如下：

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

但是這種做法有一個(gè)缺點(diǎn)，大多數(shù)情況下我們不知道元素的寬度，或者元素寬度是不固定的，但是我們可以在第三種方法的基礎(chǔ)上做一點(diǎn)變通：容器絕對(duì)定位，左偏移50%，子元素相對(duì)定位，右浮動(dòng)，右偏移50%
css代碼：

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

效果：

缺點(diǎn)：這種方式擴(kuò)展性強(qiáng)，兼容性強(qiáng)，但是理解起來比較難。

5.css3的flex實(shí)現(xiàn)水平居中

css3的flex是一個(gè)很強(qiáng)大的功能，能讓布局變得靈活方便，唯一的缺點(diǎn)就是目前兼容性差。父元素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;
        }

效果：

缺點(diǎn)：這種方法實(shí)現(xiàn)起來比較便捷，擴(kuò)展性強(qiáng)，但是兼容性比較差。

6.css3的fit-content實(shí)現(xiàn)水平居中

這種實(shí)現(xiàn)居中的方法參考《Horizontal centering using CSS fit-content value》。“fit-content”是給css的“width”屬性增加一個(gè)with:fit-content，表示縮小到內(nèi)容寬度，再配合margin:auto可以輕松的實(shí)現(xiàn)水平居中的效果。

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

效果：

缺點(diǎn)：這種方式簡(jiǎn)單易懂，擴(kuò)展性強(qiáng)，缺點(diǎn)是兼容性差。

posted @ 2018-07-23 14:39 nd 閱讀(1300) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

css點(diǎn)滴2—六種方式實(shí)現(xiàn)元素水平居中

公告