Question

我一直试图垂直对齐div容器的内容;因为这是我第一次使用这个代码，所以我创建了一个新文件来测试它，它根本不起作用。我尝试在不同的浏览器（Firefox，Opera和Chrome）中测试它，但没有一个能按预期工作。作为参考，我尝试使用以下示例来调试我的代码 - http://www.w3.org/Style/Examples/007/center.en.html

我想请有经验的人帮忙。

这是我的代码： HTML：

<div style="width: 50%; height: 10%; text-align: center; display: table cell; vertical-      align: middle; background-color: #87ceff; margin: 0px auto;min-height: 10%;">
some text
<p>Some paragraph</p>
</div>

Answer 1

正如您在此处所见：http://jsfiddle.net/thd4P/2/它有效。

<div style="width: 50%; height: 300px; text-align: center; display: table-cell; vertical-align: middle; background-color: #87ceff; margin: 0px auto;min-height: 100px;">
    some text
    <p>Some paragraph</p>
</div>

我所做的是纠正您的语法并设置px而不是百分比的高度。

Answer 2

您可能需要查看此内容：http://phrogz.net/CSS/vertical-align/

我帮助的各种IRC频道的常见问题解答是如何在这个区域内垂直居中？我经常使用vertical-align：middle来解决这个问题，但它不起作用！

这里的问题有三个方面：


HTML布局传统上不是为了指定垂直行为而设计的。就其本质而言，它在宽度方向上缩放，并且内容根据可用宽度流向适当的高度。传统上，水平尺寸和布局很容易;垂直尺寸和布局源于此。

vertical-align：middle之所以没有做出所需要的是因为作者并不理解它应该做什么，但......

...这是因为CSS规范确实搞砸了这个（在我看来）-vertical-align用于指定两个完全不同的行为，具体取决于它的使用位置。

[...]

方法1

以下示例进行了两个（非平凡的）假设。如果您能够满足这些假设，那么这种方法适合您：


您可以将要居中的内容放在块中，并为该内部内容块指定固定高度。

绝对定位这个内容是好的。（通常很好，因为内容居中的父元素仍然可以流动。


如果您能接受上述必需品，解决方法是：


将父容器指定为position：relative或position：absolute。

在子容器上指定固定高度。

设置位置：绝对值和顶部：子容器上的50％，将顶部向下移动到父级的中间位置。

设置margin-top：-yy，其中yy是子容器高度的一半，以抵消项目。

[...]

此方法要求您能够满足以下条件：


您只需要一行文本。

您可以为父元素指定固定高度。


如果您能接受上述必需品，解决方法是：


将父元素的行高设置为所需的固定高度。

[...]

因此，您可以使用line-height=100%轻松实现您的目标，但只有在div中有一行文本并且div具有设置大小时才有效。

Answer 3

你的CSS似乎有些错误：

display: table cell应该是display: table-cell
vertical- align: middle应该是vertical-align: middle

您的HTML应该定义一个包含表格单元格的外部容器（表格）：

<div id="center">
    <div>
        <div>some text
            <p>Some paragraph</p>
        </div>
    </div>
</div>

内部<div>是必需的，因为表格单元格不支持min-height。

这就是你的CSS的样子：

#center {
    width: 50%;
    height: 100vh;
    display: table;
    margin: 0px auto;
}
#center > div {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
#center > div > div {
    min-height: 30%;
    background-color: #87ceff;
}

为了证明这一点，我创建了jsFiddle。

CSS：div的垂直对齐不起作用

3 个答案: