水平居中绝对定位的 Div答案

【问题标题】：Horizontally Centering Absolute Positioned Div水平居中绝对定位的 Div
【发布时间】：2025-12-31 16:10:17
【问题描述】：

到目前为止，我可以将图像水平居中，但是一旦我尝试将其垂直居中（添加上边距），父 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;
}

我们将不胜感激！谢谢

【问题讨论】：

标签： html css layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

据我所知，容器并没有降低（也不应该），只是徽标（由于边距）降低了。

您希望图像在哪里居中，在标题上？给标题一个固定的高度，并使用边距或填充使图像居中。如果标题的高度需要流动，那么您可以使用

#container {
    width: 960px;
    margin: 0 auto;
    position: relative;
    vertical-align: middle; 
    display: table-cell
}

希望有帮助！

【讨论】：