html - 始终居中图像

Question

我有一张图片，我将其用作 Logo 。

我希望它始终居中(无论窗口大小如何)。

我无法使用自动边距执行此操作。

图像必须越过我的导航底部，它位于 Logo 上方。

HTML:

<div id="logo">

<img src="images/logorz.png" alt="logo" width="180px" />
</div>

CSS:

#logo {
    position: absolute;
    margin-left:41%;
    margin-top:-7%;


}

导航 HTML:

<div id="nav">

<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>

导航 CSS:

#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:20%;
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    text-align:center;
}



#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

Answer 1

如果您的 Logo 是 width: 180px; 并且您希望它始终居中。你可以这样做。

position: absolute;
left: 50%;
margin-left: -90px;