Question

检查此HTML：

<div class="wrapper">
    <div class="content">
    </div>
</div>
<div class="footer">
    <hr />
    <p>some text</p>
</div>

和CSS：

.footer {
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0;
    background-color: black;
}

.wrapper {
    padding-bottom: 100px;
    background-color: blue;
    height: 100%;
}

.content {
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: green;
}

html, body {
    width: 100%;
    height: 100%;
}

您可以看到footer位置绝对并且位于页面底部。 wrapper将覆盖剩余空间并在其中包含content。我希望纵向对齐content而不破坏当前布局。你有什么建议吗？

Here是JSFiddle链接。（注意：jsfiddle没有按预期工作，footer下面总是有空格，在浏览器中运行HTML文件时不会发生这种情况。）

注意：我不想为wrapper使用固定高度，我希望它涵盖所有剩余空间，所以请不要建议我使用line-height

我尝试了示例here，但它似乎无法正常工作

注意我希望布局易于修改（比如在顶部添加标题或内容）而不会破坏它，因此我想避免在wrapper和{{1}上使用绝对位置}}

注意2 很抱歉不澄清，实际上，content没有固定大小，其大小取决于其中的内容，因此使用content的解决方案不像我上面提到的那样工作

Answer 1

以下是使用以下CSS的一种方法：

.footer {
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0;
    background-color: black;
}

.wrapper {
    background-color: blue;
    position: absolute;
    top: 0;
    bottom: 100px;
    left: 0;
    right: 0;
}

.content {
    width: 200px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

使用绝对定位，然后使用负边距，因为您的内容已明确定义尺寸，这是相对简单的。

请参阅演示：http://jsfiddle.net/audetwebdesign/DgUV2/

对于.wrapper，使用顶部，底部，左侧和右侧偏移将div拉伸到全宽和高度，考虑到页脚的100px。

对于.content，将顶部和左侧设置为50％.wrapper的中心点然后调整使用负边距的.content div的中心。

请记住将body的边距清零，否则您可能会看到10px的空白取决于您的浏览器。

Answer 2

将此添加到您的.content

position: relative;
top: 50%;
transform: translateY(-50%);

vertical align

只需3行代码

Answer 3

我能够使用Method 1 from the example you linked

让它工作

我添加了以下内容：

.content {
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: green;
    /* THE BELOW WAS ADDED */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

html, body {
    width: 100%;
    height: 100%;
    /* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
    margin: 0;
}

jsFiddle of working example

在div内垂直对齐中间div

3 个答案: