css點滴1—八種方式實現元素垂直居中

時間 2019-11-05

標籤 css 點滴方式實現元素垂直居中欄目 CSS 简体版

原文原文鏈接

這裏介紹實現元素垂直居中的方式，文章是參考了《css製做水平垂直居中對齊》這一篇文章。javascript

1.行高和高度實現css

這種方式實現單行垂直居中是很簡單的，可是要保證元素內容是單行的，而且其高度是不變的，只要將「line-height」和「height」設置成同樣的就能夠了。這種方式侷限性在於只有單行文本的元素才適用，多行元素是不適用的。html

html代碼：java

<div class="vertical">
    <span>aaa</span>content
</div>

css代碼：jquery

        .vertical {
            height: 100px;
            line-height: 100px;
        }

效果：

缺點：這裏「aaa」內容包含在span中，span是行內元素，因此仍然是一行，換成div就不行了。這種方式僅僅適合在文本和圖片上，而且文本再也不是單行時，效果很差。在一些小元素上仍是很合適的，好比一個button，image，或者單行文本，h1上。ios

2.容器絕對定位瀏覽器

這種方法須要給容器設置絕對定位，position:absolute，而且定位高度（top:50%），margin-top爲高度的一半（margin-top:-height/2）。這就意味着元素必需要有一個固定的高度，這樣一來給元素設置了固定高度，若是又設置overflow:auto，當元素內容超過容器後，元素就會出現滾動，而不會自適應內容高度。
html代碼：jquery插件

<div class="vertical">
    content
</div>

css代碼：wordpress

        .vertical {
            height: 100px; /*元素高度*/
            position: absolute; /* 絕對定位 */
            left: 50%; /*配合margin-left的負值實現水平居中*/
            top: 50%; /* 元素的頂部邊界離父元素的位置是父元素高度的一半 */
            margin-top: -50px; /*設置元素頂邊負邊距，大小爲元素高度的一半*/
        }

效果以下：佈局

缺點：這種方式能夠在各類瀏覽器下工做，解構簡單明瞭，不須要額外添加標籤。可是因爲固定死元素的高度，只是沒有足夠的空間，當內容超過容器大小時，要麼會出現滾動條（若是元素在body內，當用戶縮小瀏覽器窗口時，body的滾動條將不會出現），要麼會消失。

這種方式針對多行元素來進行垂直居中，並且並不是是此元素的內容垂直居中。另外此方法是經過絕對定位來實現的，要注意下面幾點：其一元素定位關係到一個相對定位參考，因此要保證元素是相對那一個參考座標；另外須要給元素設置一個明確的高度值，並給元素設置一個margin-top，並且其值爲元素高度的一半。最好還要給元素一個寬度，由於絕對定位後脫離文檔流，其寬度是根據元素內容所佔的寬度來計算了，爲了能讓視覺效果更好，最好設置一個寬度值。

照葫蘆畫瓢，還能夠設置元素水平居中，css代碼以下：

        .vertical {
            height: 100px; /*元素高度*/
            width: 100px; /*元素寬度*/
            position: absolute; /* 絕對定位 */
            left: 50%; /*配合margin-left的負值實現水平居中*/
            top: 50%; /* 元素的頂部邊界離父元素的位置是父元素高度的一半 */
            margin-top: -50px; /*設置元素頂邊負邊距，大小爲元素高度的一半*/
            margin-left: -50px; /*設置元素左邊負邊距，大小爲寬度的一半*/
        }

這種方式能夠實現元素水平居中，長用於頁面在中間的佈局，使用這種方式要注意：水平垂直居中的元素要有明確大小（就是要有明確的高度，寬度值）；給元素進行絕對定位，並設置left，top值爲50%（最好使用絕對定位，若是隻是水平居中，能夠換成相對定位）；最後設置margin-top和margin-left的負值，大小爲元素寬度和高度的一半。

3.div模擬表格

這種方法是使用div模擬表格效果，也就是將多個div的「display」屬性設置爲「table」和「table-cell」，並設置他們的「vertical-align」屬性爲「middle」。參考《The display declaration》這篇文章。

html代碼以下：

<div id="container">
    <div id="content">content</div>
</div>

css代碼：

        #container {
            height: 300px;
            display: table; /*讓元素以表格形式渲染*/
        }

        #content {
            display: table-cell; /*讓元素以表格的單元格形式渲染*/
            vertical-align: middle; /*使用元素的垂直對齊*/
        }

效果以下：

缺點：這種方式不會像上面兩種同樣有高度的限制，能夠根據元素的內容改變高度，從而沒有空間的限制，元素的內容不會由於沒有足夠的空間而被切斷或者出現難看的滾動條。可是這種方法只適合於現代瀏覽器，IE6-7沒法正常運行，由於IE6-7不支持display:table，爲了解決問題，須要額外增長一個div，而且使用hack，以下：

html代碼：

<div class="table">
    <div class="tableCell">
        <div class="content">content</div>
    </div>
</div>

css代碼：

.table {
            height: 300px; /*高度值不能少*/
            width: 300px; /*寬度值不能少*/
            display: table;
            position: relative;
            float: left;
        }

        .tableCell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            padding: 10px;
            *position: absolute;
            *top: 50%;
            *left: 50%;
        }
        .content {
            *position: relative;
            *top: -50%;
            *left: -50%;
        }

這裏使用了「*」標記來兼容IE6-7瀏覽器

4.使用空的<div>元素

這種方式比較新奇，在須要居中的元素前面放一個<div>（塊元素便可），而後設置這個<div>的高度爲50%，margin-bottom爲元素高度的一半，而且居中元素須要清除浮動。要注意使用這種方式，若是居中元素放在body中的話，須要給html，body設置一個「height:100%」的屬性。

html代碼：

<body>
  <div id="floater"><!--This block have empty content--></div>
  <div id="content">Content section</div>
</body>

css代碼：

        html, body {
            height: 100%
        }

        #floater {
            float: left;
            height: 50%; /*相對父元素高度的50%*/
            margin-bottom: -120px; /*值大小爲居中元素高度的一半*/
        }

        #content {
            clear: both; /*清除浮動*/
            height: 240px;
            position: relative;
        }

效果：

缺點：這種方式能兼容全部瀏覽器，在沒有足夠空間下，內容不會被切掉。可是也有缺點，元素高度被固定死，沒法達到內容自適應高度，若是居中元素加上overflow屬性，要麼元素出現滾動條，要麼被切掉。另外還有一個缺點，就是額外添加了一個空標籤。

5.盒模型

這種方法和第三種同樣使用display:table-cell，不一樣之處在於須要一個盒模型。爲了實現兼容IE，須要增長一個行內標籤，好比「span」（最好使用行內標籤，不能使用塊標籤，不然沒有效果），並把這個盒模型高度設置爲100%，原理能夠參考《大小不固定的圖片，多行文字的水平垂直居中》。

html代碼：

<p class="table">
        <span class="tableCell">
            Centering multiple lines <br> in a block container.
        </span>
    <!--[if lte IE 7]><b></b><![endif]-->
</p>

css代碼：

<style type="text/css">       
     .table {
            border: 1px solid orange;
            display: table;
            height: 200px;
            width: 200px;
            text-align: center;
        }

        .tableCell {
            display: table-cell;
            vertical-align: middle;
        }
</style>
    <!--[if lte ie 7]>
    <style type="text/css">
        /*第五種方法*/
        .tableCell {
            display: inline-block;
        }

        b {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            width: 1px;
        }
    </style>
    <![endif]-->

效果：

缺點：和第三種方法同樣，這種方法不會有高度的限制。缺點是這種方法爲了讓IE正常運行，須要額外增長一些標籤，另外就是盒模型的標籤有類型限制，只能添加行內標籤。

6.inline-block方法

這個種方式採用的是display:inline-block，而後藉助另外一個元素的高度來實現居中。

html代碼：

<div id="parent">
    <div id="vertically_center">
        <p>I am vertically centered!</p>
    </div>
    <div id="extra"></div>
</div>

css代碼：

        html,body{
            height: 100%;
        }
        #parent {
            height: 500px; /*定義高度，讓線盒模div#eatra有一個參照物，能夠是固定值，也能夠是參照物*/
            border: 1px solid red;
        }
        #vertically_center,#extra {
            display: inline-block; /*把元素轉爲行內元素顯示*/
            vertical-align: middle; /*垂直居中*/
        }
        #extra {
            height: 100%;
        }
    <!--[if lt IE 8]>
        <style type="text/css">
            /*IE6-7不支持display:inline-block，因此在ie6-7另外寫一個hack，用來支持ie6-7*/
            #vertically_center, #extra {
                display: inline; zoom: 1;
            }
            #extra {
                width: 1px;
            }
        </style>
    <![endif]-->

效果：

缺點：這種方式自適應高度，簡單易懂，可是須要給元素的父元素設置一個高度，能夠是一個固定值或者百分比，另外須要增長一個額外的標籤，當作盒模型，如div#extra，而且須要設置高度爲100%。另外IE6-7不支持display:inline-block，須要給他們另外寫一個樣式。關於這種方法的操做能夠參考：《CSS，Vertical Centering》

7.多行內容居中

這個方法是針對多行內容居中，並且容器高度是可變的，方法很簡單，就是給出上下一個樣的padding值。

html代碼：

<div class="columns">
    <div class="item">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

css代碼：

        .item {
            padding-top: 30px;
            padding-bottom: 30px;
        }

效果：

缺點：這種方法支持全部瀏覽器，支持全部元素，簡單易懂，結果清晰，可是使用這種方法不能給容器高度，若是高度固定則沒法達到效果。

8.jquery實現

若是元素固定高度，實現垂直居中很方便，可是自適應高度就比較棘手，此次咱們可使用jquery方法實現。

html代碼：

<div class="container">
    <p>Centered In the middle of the page with jQuery</p>
</div>

css代碼：

.container {
            background-color: #338BC7;
            width: 270px;
            height: 150px;
        }

jquery代碼：

<script>
$(document).ready(function () {
    $(window).resize(function () {
        $('.container').css({
            position: 'absolute',
            left: ($(window).width() - $('.container').outerWidth()) / 2,
            top: ($(window).height() - $('.container').outerHeight()) / 2
        })
    })
})
</script>

缺點：這種方法解構簡單，易懂，不須要固定元素大小，兼容各類瀏覽器。缺點是要調用jquery，若是不支持js將沒法運行。

9.jquery插件

根據第8種方法，能夠寫一個實現元素水平垂直居中的小插件，jquery插件代碼以下：

(function ($) {
    $.fn.vhAlign = function () {
        return this.each(function (i) {
            //獲取元素的內容高度
            var h = Math.ceil($(this).height());
            //outerHeight=padding+border+height
            var oh = Math.ceil($(this).outerHeight());
            //取得margin-top值
            var mt = Math.ceil(oh / 2);
            //取得元素寬度
            var w = Math.ceil($(this).width());
            //outerWidth=padding+border+width
            var ow = Math.ceil($(this).outerWidth());
            //取得margin-left
            var ml = Math.ceil(ow / 2);
            //實現元素居中效果
            $(this).css({
                "margin-top": "-" + mt + "px",
                "top": "50%",
                "margin-left": "-" + ml + "px",
                "left": "50%",
                "width": w,
                "height": h,
                "position": "absolute"
            });
        });
    };
})(jQuery);

html代碼：

<div class="wrap">
    <p>test jquery</p>
</div>

引入這個插件：

<script type="text/javascript" src="vhAlign.js"></script>

調用這個插件：

$(document).ready(function () {
    $('.wrap').vhAlign();
})

效果：

缺點：這裏有一點須要注意，若是元素不是相對body居中，須要在父元素中進行相對定位。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。