Html 在无绝对位置的情况下，通过溢流实现对中

我试图实现一个居中的图像的效果，该图像经过其包含div的边框，但不使用position:absolute，因为它隐藏了其后面的标题按钮。有没有干净的方法可以做到这一点，而不只是使用老式的绝对位置和所有的元素（如果我尝试做任何反应，这将是一个真正的痛苦）

相关代码：

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

#logo {
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%;
    width: 150px;
    margin-left: -75px; 
}

JSFiddle：

---

另外，我愿意使用几乎任何东西，只要它能干净地完成工作。

使用CSS背景图像

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
    background-image:url(....);
    background-repeat-no-repeat;
    background-position: 0px 0px; <--- adjust accordingly.
}

.container{
最大宽度：60雷姆；
保证金：0自动；
填充物：3雷姆1.5雷姆；
右边框：1px纯黑；
左边框：1px纯黑；
背景色：白色；
背景图像：url（…）；
背景重复无重复；
背景位置：0px 0px；您可以使用
显示：内联块；


HTML:

<div class="section header">
    <div class="container no-border">
        <a class="header" href="#">About</a>
        <a class="header" href="#">News</a>
        <a class="header" href="#">Teams</a>
        <div class="logo_wrap">
            <img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
        </div>
        <a class="header" href="#">Apparel</a>
        <a class="header" href="#">Sponsorship</a>
        <a class="header" href="#">Contact</a>
    </div>
</div>

有趣。然后添加溢出：我想是可见的？还有，我该如何将其他标题按钮放在它周围的中心位置？蛮力？向左浮动一组，向右浮动一组。在包装元素上使用最小宽度，以确保它不会收缩到重叠点。这…太棒了！所以将image div的溢出设置为visible允许它取代包含分区的边界？
body {
    margin: 0;
    font-family: Helvetica;
    font-size: 100%;
    background-color: #191A18;
}

.section {
    margin: 0;
    padding: 0;
    clear: both;
}

.section.header {
    background-image: url('../images/background.png');
    background-position: 50% 90%;
    border-bottom: 1px solid #A8A8A8;
    box-shadow: 0 1rem 1rem #000;
    text-align: center;
}

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

.container.logo {
    background-image: url('../images/main-image.jpg');
    background-position: 50% 20%;
    min-height: 20rem;
}

a.header {
    color: white;
    display:inline-block;
    text-decoration: none;
    padding: 3rem 1.5rem;
    margin: 0 0.5rem;
    background-color: rgba(255,255,255,0.1);
}

#logo {
    width: 150px;

}
.logo_wrap{
    display: inline-block; 
    height: 5.5rem;
    vertical-align:top;
    overflow:visible;
}