为什么我的图像的左侧在中心而不是实际中心？答案

【问题标题】：Why is the left side of my image in the center instead of the actual center?为什么我的图像的左侧在中心而不是实际中心？
【发布时间】：2013-06-08 03:27:49
【问题描述】：

我想要完成的是将图像块放到横幅的中心。发生的事情是图像的左边缘是中心。如何将图像的实际中心放在横幅的中心？我希望这是有道理的......哈哈。

这是我目前得到的：

这就是我想要得到的……你可以忽略字体、边框等方面的差异……哈哈

这是我的 CSS：

#profile-banner {
    background: #000;
    height: 267px;
    border-bottom: 1px solid #999;
    margin: 0px 0px 25px 0px;
    text-align: center;
}

#profile-banner h1 {
    font-size: 36px;
    font-family: Piximisa;
    letter-spacing: 5px;
    padding: 15px;
    margin: 0px;
}

#profile-banner p {
    margin: 0px;
    padding: 0px;

}

#profile-banner .logo {
    top: 125px;
    background: #333;
    border: 1px solid #666;
    width: 250px;
    height: 250px;
    position: absolute;
    margin: 0 auto;
    padding: 0px;
}

这是我的 HTML：

<div id="profile-banner">
     <h1>Some Team Name</h1>
     <p>
         Some catchy slogan.
     </p>
     <img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>

感谢您的宝贵时间！

【问题讨论】：

了解如何使用 StackOverflow。
你为什么要把top: 125px;和position: absolute;给.logo？
从 .logo 中删除 position:absolute
@Praveen ：我添加了 top: 125px 以便图像的垂直中间与横幅底部对齐（例如宽黑框）......并且绝对位置给出这是一个真正的垂直居中。
@ShoeLace1291 请查看我的回答。看看它是否有效。告诉我。

标签： css image position

【解决方案1】：

您不能混合使用绝对定位和静态定位。您可以使用绝对定位：

position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;

或静态定位：

margin: 125px auto 0;

主要区别在于元素如何影响其他元素。使用绝对定位将元素从文档流中取出，因此不会影响其他元素。

【讨论】：

【解决方案2】：

以这种方式更改您的 CSS

#profile-banner .logo {
    margin: 125px auto 0;
    background: #333;
    border: 1px solid #666;
    width: 250px;
    height: 250px;
    padding: 0px;
}

变化

删除position 和top。
将top 添加为margin-top。
定位的元素不考虑边距。

【讨论】：