在块内垂直居中元素

Question

我正在重新设计我的网站从表格布局到CSS.我在看似非常简单的任务时遇到了一些问题.

该网站很简单.屏幕中间的一个框,其中包含多个链接.

旧网站用于<td valign="center">集中框中的所有链接.CSS似乎没有等价物.我一直使用负边距将元素集中在一起,如下所示:

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

当您确切知道要居中的元素有多大时,这种方法很有效,但我需要能够在不知道链接占用多少垂直大小的情况下使链接居中.我只是希望盒子中的对齐方式就像text-align: center.也只是垂直的.

当前使用表格设计的网站
CSS版本的当前进展

Answer 1

你有4个,可能是5个解决方案,一个添加到底部,因为它是你原来的不同css和js设置高度的组合:

• 使用表格单元格并垂直居中它的内容
• 使用display: table-cell; vertical-align: middle;的CSS为您的div
• 每次div的高度通过javascript更改时更新margin-top
• 使用css3 flexbox(您需要使用特定于供应商的扩展,因此它不适用于某些旧版浏览器)

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

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

这个http://jsfiddle.net/gK7YU/的小提琴

新款flexbox - 也是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更新它.

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>

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

您的示例在这里：jsfiddle