在块级元素中垂直居中元素

Question

我目前正在将我的网站从表格布局改为CSS。 我在处理一个似乎非常简单的任务时遇到了一些问题。

该站点很简单。 屏幕中央有一个包含多个链接的框。

旧站点使用<td valign="center">来使框中所有链接居中。 CSS似乎没有等效项。 我一直在使用负边距来居中元素，如下所示：

div {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

当你知道要居中的元素的大小时，这样做很好用，但我需要能够在不知道链接占用多少垂直空间的情况下将链接居中。 我只想让盒子中的对齐方式像text-align: center一样。也要垂直居中。 使用表格设计的当前网站
CSS版本的当前进展

- user1730358

Answer 1

您有4个，可能是5个解决方案，其中一个添加到底部，因为它是从原始CSS和JS的组合中得出的，用于设置高度：

• 使用表格单元格并将其内容垂直居中
• 使用display: table-cell; vertical-align: middle;作为您的div的CSS
• 通过JavaScript每次div的高度更改时更新margin-top
• 使用CSS3 flexbox（您需要使用供应商特定的扩展名，因此它在一些旧浏览器上无法工作）

使用旧式flexbox的简单示例 - Chrome版本 - 添加包装器div并将其样式设置为：

#wrapper { display: -webkit-box; -webkit-box-align: center; }
#wrapper > div { margin: auto; }

为此做出贡献 http://jsfiddle.net/gK7YU/

新样式的弹性盒子 - 同时适用于chrome版本，您还需要在最终产品中添加其他供应商前缀以及没有前缀的版本。

#wrapper { display: -webkit-flex; }
#wrapper > div { margin: auto; }

针对此问题的演示代码: http://jsfiddle.net/LeHRD/

这些示例包含了更多的CSS属性，以便您可以轻松地查看发生了什么。

哦，抱歉，您不需要使用包装器div，您可以使用flexbox垂直居中任何内容...无论如何，我提出的解决方案可以与display:table-cell;结合使用，因此它也适用于旧浏览器。

您也可以使用指定高度的绝对定位 jsfiddle.net/N28AU/1

#wrapper { possition:relative }
#wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}

如果您想避免使用负边距，可以从包含的元素计算高度并通过js更新它。

- xception

---

你也可以在div上使用display: table-cell：http://stackoverflow.com/a/9561360/557612 - steveax

如果您允许，我想将这个内容添加到我的答案中。这样，看到这篇文章的人就不必再阅读评论以获取完整列表了。 - xception

我对弹性盒子布局一无所知。非常有趣。我宁愿不使用实验性功能。谢谢！ - user1730358

@user1730358，你可以将它们结合起来，使用display: table-cell;来适配那些不支持其他属性的浏览器，然后再为现代浏览器声明其余属性。当浏览器无法识别CSS规则的值时，这些规则将被忽略，只有最后一个被识别的规则会被应用。虽然最终你的CSS可能会变得更大，但我总是喜欢展望未来。 - xception

你可以添加以下代码：设置 #wrapper 的 position 为 relative，并且 #wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}。http://jsfiddle.net/N28AU/1/ - MiniGod

Answer 2

我已经访问了您的网站并复制了HTML代码。您可以执行以下操作：

<style>
#box{
    display: table;
}
#box > div {
    display: table-cell;
    vertical-align: middle;
}
</style>

<!-- Your html part -->
<div id="box">
    <div>
        <a href="#">Link A</a>
        <a href="#">Link B</a>
        <a href="#">Link C</a>
        <a href="#">Link D</a>
    </div>
</div>

你必须在 #box 中包含一个 div 元素，因为如果没有设置为 display: table 的包装元素，display: table-cell 属性将无法正常工作。

你的示例代码： jsfiddle。

- VKen

---

这正是我正在寻找的。虽然必须使用另一个div，但它可以工作。谢谢！ - user1730358

@user1730358 非常欢迎。是啊，这真是遗憾。作为网络开发人员，我们从旧的IE vs Netscape时代开始就一直在处理浏览器的怪异问题。这只是其中之一，唉...但如果你想让它更语义化，还有另一种方法，使用<ul>和<li>，但你仍然需要将它们包装在一个<div>中。 - VKen