Question

是否有一种CSS方法可以在body元素中垂直对齐我的div？

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

这些是我尝试过但却不起作用的事情：

body { vertical-align: middle; }

#mainContent { 
   vertical-align: middle;
}

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

Answer 1

我没有桌子就做了：（demo on 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;
}

你可以看到它here

它适用于任何其他类型的层次结构，包括div，p等。

Answer 5

老实说，我的观点通常是，如果你正在进行垂直对齐，你仍然应该使用一张桌子。我知道它经常不受欢迎，但它仍然是垂直居中的最简单，最干净的方式。

HTML

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

CSS

td {vertical-align: middle;}

垂直对齐身体内的div

5 个答案:

我没有桌子就做了：（demo on dabblet.com）

HTML：

CSS：