Html 垂直对齐中间div内div

检查此HTML：

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

您可以看到

footer

具有绝对位置，并停留在页面底部<代码>包装将覆盖剩余空间，并在其中包含一个

内容

。我想垂直对齐

内容

，而不破坏当前布局。你有什么建议吗

是JSIDLE链接。（注意：JSFIDLE不能按预期工作，在

页脚下总是有一个空格，在浏览器中运行HTML文件时不会发生这种行为）

注意：我不想使用固定高度作为
包装
，我希望它覆盖所有剩余空间，因此请不要建议我使用
行高度

我试过这个例子，但似乎不起作用

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

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

注2很抱歉没有澄清，实际上，
内容没有固定的大小，其大小取决于其中的内容，因此使用
负边距的解决方案不能像我上面提到的那样工作这里有一种使用以下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;
}

使用绝对定位，然后使用负边距，因为您的内容有明确的定义
维度，这是相对简单的

请参见演示：

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

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

请记住将
正文的边距归零，否则您可能会看到10px的空白
取决于您的浏览器。
以下是一种使用以下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;
}

使用绝对定位，然后使用负边距，因为您的内容有明确的定义
维度，这是相对简单的

请参见演示：

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

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

请记住将
正文的边距归零，否则您可能会看到10px的空白
取决于您的浏览器。
我可以使用

我补充说：

.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;
}

我可以使用

我补充说：

.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;
}

将此添加到您的
内容中

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

只需在
中添加3行代码，即可将其添加到您的
.content

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

只有3行代码
您就快到了，
.wrapper
延伸到页脚下方，可能不是预期的效果。看我的答案，我们都在使用相同的方法。@MarcAudet啊，我以前没见过你在这个问题上的小转变。很不错的！你赢了！；）嘿，我们都赢了！学习是快乐的关键！您就快到了，
.wrapper
延伸到页脚下方，可能不是期望的效果。看我的答案，我们都在使用相同的方法。@MarcAudet啊，我以前没见过你在这个问题上的小转变。很不错的！你赢了！；）嘿，我们都赢了！学习是快乐的关键！非常感谢你的建议，效果很好。但是，在bot
wrapper
和
container
中是否有任何方法可以避免使用
position:absolute
？因为如果我在网站顶部放置其他东西，它会破坏布局，所以我希望布局足够灵活，可以轻松扩展而不破坏布局！！！现在这是一个不同的问题。你会考虑使用CSS表/表格单元格吗？你能告诉我关于表格/表格单元格解决方案的例子或参考链接吗？如果你在包装上添加额外的内容，比如说一个页眉，你想让页眉、包装纸和页脚都放在一个页面上（没有垂直滚动）吗？是的，如果我只添加一个页眉，但是如果有更多的内容添加，滚动就可以了谢谢你的建议，效果很好。但是，在bot
wrapper
和
container
中是否有任何方法可以避免使用
position:absolute
？因为如果我在网站顶部放置其他东西，它会破坏布局，所以我希望布局足够灵活，可以轻松扩展而不破坏布局！！！现在这是一个不同的问题。你会考虑使用CSS表/表格单元格吗？你能告诉我关于表格/表格单元格解决方案的例子或参考链接吗？如果你在包装上添加额外的内容，比如说一个页眉，你想让页眉、包装纸和页脚都放在一个页面上（没有垂直滚动）吗？是的，如果我只添加一个页眉，但是，如果有更多的内容添加，滚动就可以了。过了就寝时间，我会回来查看的！过一会儿再回来，过了我的就寝时间！代码应该兼容所有东西，一个好的开发人员应该像Wise这样编写代码，这样你就不会考虑它们了？这是留给你的，我说，事实上，请不要再争论了。代码应该在所有方面都兼容，一个好的开发人员应该像Wises那样编写代码，这样你就不会考虑它们了？这由你决定，我说的是事实，请不要再争论了