css - 带边距的水平居中 div (CSS)

Question

如何让有边距的 div 水平居中？

<div id="container">
    <div id="center_me"></div>
</div>


#container{
    position:relative;
    width:100%;
    height:400px;
}

#center_me{
    position:absolute;
    width:100%;
    margin:0 50px;
    max-width:300px;
    height:100%;
    left:50%;
    -webkit-transform:translateX(-50%);
}

我不能使用 margin:0 auto，因为我希望 div 有边距；而 left:50% translateX(-50%) 技术不考虑边距。我想在调整窗口大小时流畅地保留边距(始终将 div 居中并始终保持相同的固定边距)。我是否漏掉了一些非常明显的东西？

http://jsfiddle.net/R3yny/

只是 Css，谢谢。

Answer 1

是否可以简单地在位于 #center_me 内的另一个 div 上设置边距？

<div id="container">
    <div id="center_me">
        <div id="i_have_the_margin"></div>
    </div>
</div>

然后你可以在#center_me上使用margin:0 auto;，像这样-http://jsfiddle.net/nickg1/R3yny/3/ (在 Opera 中测试)