Css 在块内垂直居中元素

我目前正在重新设计我的网站，从表格布局到CSS。我在一个看似简单的任务上遇到了一些问题

这个网站很简单。屏幕中间包含几个链接的框。

旧站点使用

将框中的所有链接居中。CSS似乎没有对等的功能。我一直在使用负边距将元素居中，如下所示：

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

当您确切地知道正在居中的元素有多大时，这很好，但是我需要能够居中链接，而不知道链接占用的垂直大小。我只希望框中的对齐方式类似于

文本对齐：居中

。也只是垂直的

---

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

• 使用表格单元格并将其内容垂直居中
• 使用

  显示：表格单元格；垂直对齐：中间对齐作为div的css

• 每次div的高度通过javascript更改时更新margin top
• 使用css3 flexbox（您需要使用特定于供应商的扩展，这样它就无法在一些旧浏览器上工作）

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

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

摆弄

新样式flexbox-也是chrome版本，您必须在最终产品中添加其他供应商前缀以及没有任何前缀的版本

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

为这件事提琴：

fiddle还包含一些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进行更新。

我已经访问了您的网站，并在这里复制了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>

#盒子{
显示：表格；
}
#方框>分区{
显示：表格单元格；
垂直对齐：中间对齐；
}

必须将

div

元素包装在

#框中，因为如果没有设置为
display:table
的包装器元素，则
display:table
属性将无法正常工作

这里的示例：
您也可以在div:True上使用
display:table cell
，如果您允许，我还想将其添加到我的答案中。因此，无论谁看到这一点，都不必同时阅读参赛名单。我不知道flexbox。非常有趣。我宁愿不使用实验特性。谢谢你@用户1730358您可以将它们合并，您知道。。。使用显示：表格单元格；对于那些不了解其他内容的浏览器，除了为现代浏览器声明其余内容外，当然，你的css最终会更大一些。。。但我总是喜欢展望未来，当浏览器无法识别css规则的值时，css规则将被忽略，因此只使用最后一个识别的值。您可以添加以下内容：Set
#wrapper
position:relative
，和
#wrapper>div{position:absolute；top:0；right:0；bottom:0；left:0；margin:auto；}
这正是我要找的。遗憾的是，你不得不使用另一个div，但它是有效的。谢谢大家!@用户1730358非常欢迎您。是啊，真遗憾。作为web开发人员，从旧IE vs Netscape时代起，我们就一直在处理浏览器的怪癖。这只是其中之一，唉。。。但是如果你想让它具有语义，还有另一种方法可以使用
和
，但是你仍然需要用
来包装它们。