html - 水平居中绝对定位 Div

Question

截至目前，我可以水平居中图像，但一旦我尝试将其垂直居中(添加上边距)，父 div 也会向下移动(这是我不想要的)。

这是我正在谈论的图像:Screenshot

我认为最好的选择是将它设置为绝对位置，但是我在水平居中时遇到了问题。

<div id="header">
    <div id="container">
        <div id="logo">
            <a href="index.html"><img src="images/logo.png" /></a>
        </div>
    </div>
</div>

#container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

#logo {
    height: 96px;
    width: 484px;
    margin: 50px auto;
}

帮助将不胜感激!谢谢

Answer 1

您可以将 overflow: hidden 放在 #container 上。它将引入一个新的 block 格式化上下文，因此边距不再折叠。

• > jsFiddle Demo
• > The magic of overflow: hidden
• > Can overflow:hidden affect layout?