Question

如何让中间框中的内容垂直居中？

HTML：

<body>
    <div id="header">Header content</div>
    <div id="bodyBox">Body content</div>
    <div id="footer">Footer content</div>
</body>

CSS：

body {
}
body > div {
    border-radius:10px;
    border:2px solid #AAA;
    padding:10px;
    text-align:center;
}
#header {
    position:absolute;
    height:50px;
    top:10px;
    right:10px;
    left:10px;
}
#bodyBox {
    position:absolute;
    right:10px;
    top:94px;
    bottom:94px;
    left:10px;
    border-color:#35C12E;
    background-color:#f0f4f0;
}
#footer {
    position:absolute;
    height:50px;
    bottom:10px;
    right:10px;
    left:10px;
    border-color:#B24842;
}

Answer 1

我通常不主张强制显示表格，但在使用旧浏览器时很方便。还有另外两种选择：使用CSS转换或Flexbox（后者更新，而不像前者那样广泛支持）。

这两种方法都需要将您的身体内容包装在其他元素中，例如<div>：

<div id="bodyBox">
    <div>
        Body content
    </div>
</div>

解决方案1：CSS Flexbox

另一种方法是使用CSS flexbox模型（参见 demo ）来实现相同的效果。您必须将以下样式添加到#bodyBox：

#bodyBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

解决方案2：CSS转换

这里的诀窍是将内部<div>从其包含父项的顶部和左侧绝对置于50％。但是，为了抵消<div>计算维度导致的定位，我们将使用CSS变换来实现。您可能必须使用transform的供应商前缀才能工作。 **但是，一个主要的警告是，包含父项#bodyBox的维度必须明确预定义，因为绝对定位其子项将它们从文档流中取出，导致父元素的高度崩溃。

#bodyBox > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

您需要添加vertical-align。添加div包装，并在当前display内为table值div。然后在其中添加另一个div，并为其赋予display值table-cell。

DEMO http://jsfiddle.net/9pYSU/2/

#bodyBox div {
    display: table;
    vertical-align: middle;
    height: 100%;
    width: 100%;
}
#bodyBox div div {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

如何使中间框中的内容垂直居中？

2 个答案:

解决方案1：CSS Flexbox

解决方案2：CSS转换