html - 没有负边距的绝对中心 div

Question

我已经尝试了大约 6 种不同的方法，但都无法让它发挥作用。

我试图在使用时将“div.content”水平居中在页面上position:absolute;

此方法适用于所有浏览器，但如果缩小页面大小，底部会出现滚动条：

http://jsfiddle.net/AuqXY/16/

HTML：

<div class="wrapper">
    <div class="header"></div>
    <div class="footer"></div>
    <div class="content">
        <div class="content2">CENTER THIS DIV</div>
    </div>
</div>

CSS：

div.header {
    background:url('http://i.istockimg.com/file_thumbview_approve/11670843/2/stock-illustration-11670843-seamless-wallpaper-background-tile.jpg') top center repeat-x;
    height:150px;        
}

div.footer {
    background:url('http://www.featurepics.com/FI/Thumb300/20081029/Blue-Tile-Background-947601.jpg') top left repeat-x;
    height:150px;        
}

div.content {
    position:absolute;
    top:20px;
    left:50%;
    height:250px;
    width:300px;        
}

div.content2 {
    position:relative;
    left:-50%;
    background:white;  
    height:250px;
}

​</p>

​</p>

Answer 1

我建议使用这样的负边距：http: //jsfiddle.net/joshnh/HFwMT/

这是调整后的代码：

HTML：

<div class="header"></div>
<div class="content">
   <div class="content2">HERE</div>
</div>
<div class="footer"></div>​

CSS：

.header {
    background: url('http://i.istockimg.com/file_thumbview_approve/11670843/2/stock-illustration-11670843-seamless-wallpaper-background-tile.jpg') top center repeat-x;
    height: 150px;        
}
.footer {
    background: url('http://www.featurepics.com/FI/Thumb300/20081029/Blue-Tile-Background-947601.jpg') top left repeat-x;
    height: 150px;        
}
.content2 {
    background: #fff;  
    height: 250px;
    left: 50%;
    margin-left: -150px; /* Half of the width */
    margin-top: -130px;   
    position: absolute;
    width: 300px;
}​

Answer 2

你可以试试这个..我没有测试过..

div.content {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;      
    }

    div.content2 {
        position: fixed;
        top: 50%;
        left: 50%;
        border: 0px;    
        overflow: none;
    }

Answer 3

我不太清楚这意味着什么：我正在尝试使用绝对中心的 div。但我发现标签效果很好。

<div class="wrapper">
    <div class="header"></div>
    <div class="footer"></div>
    <div class="content">
        <center><div class="content2">HERE</div></center>
    </div>
</div>

该死的CSS。除此之外，您还需要一根魔杖（就我而言）。