垂直對齊身體內的div

Question

有沒有一種CSS方法可以在body元素中垂直對齊我的div？

事情是我的div每次都會有不同的高度，所以它不是恆定的。

這些是我嘗試但他們不工作的東西：

body { vertical-align: middle; }

#mainContent { 
   vertical-align: middle;
}

// Also this
body { margin-top: 20%; margin-bottom: 20%; }

Answer 1

我沒有桌子就做到了:(在dabblet.com上演示 ）

這個演示的主要技巧是在正常的元素流從上到下，所以margin-top: auto設置為零。 但是，對於絕對定位的元素，可以使用相同的自由空間分布，同樣可以在指定的top和bottom垂直居中（在IE7中不起作用）。

這個技巧適用於任何大小的div 。

HTML：

<div></div>

CSS：

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

Answer 2

確實是個常見問題。 我見過很多人為此提供直接的css解決方案，但他們都需要知道元素的高度需要居中，所以沒有幫助。

我通常使用jquery這樣做：

$(document).ready(function(){
    site.resize();

    $(window).resize(function(){
        site.resize();
    });
});

var site = {
    resize: function(){
        var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2);
        $('#mainContent').css('margin-top', new_margin + 'px');
    }
};

Answer 3

令人驚訝（或不）， vertical-align工具實際上最適合這項工作。 最重要的是，不需要Javascript。

在下面的例子中，我定位outer體內的中產階級，和inner類在中間outer類。

預覽： http ： //jsfiddle.net/tLkSV/513/

HTML：

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

垂直對齊通過對齊彼此相鄰的元素的中心來工作。 將vertical-align應用於單個元素絕對沒有任何意義。 如果添加第二個沒有寬度但是容器高度的元素，則單個元素將使用此無寬度元素移動到垂直居中，從而垂直居中。 唯一的要求是將兩個元素都設置為內聯（或內聯塊），並將其vertical-align屬性設置為vertical-align: middle 。

注意：您可能會在下面的代碼中注意到我的<span>標記和<div>標記正在觸及。 因為它們都是內聯元素，所以空格實際上會在無寬度元素和div之間添加一個空格，因此請務必將其保留。

Answer 4

您可以在不使用表的情況下執行此操作，也無需添加額外元素：

<ul>
    <li>One short item</li>
    <li>Any real long text...</li>
    <li>Another short item</li>
</ul>

然后是CSS：

ul {
    list-style-type: none;
    display: table-row;
}
li {
    display: table-cell;
    vertical-align: middle;
}

你可以在這里看到它

它適用於任何其他類型的層次結構，包括div，p等。

Answer 5

老實說，我的意見通常是，如果你正在進行垂直對齊，你仍然應該使用一張桌子。 我知道它經常不受歡迎，但它仍然是垂直居中的最簡單，最干凈的方式。

HTML

<table>
    <tbody>
        <tr>
            <td>
                <div>Your DIV here.</div>
            </td>
        </tr>
    </tbody>
</table>

CSS

td {vertical-align: middle;}