將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具有margin； 而左：50％translationX（-50％）技術未考慮邊距。 我想在調整窗口大小時流暢地保留邊距（始終將div居中並始終保留相同的固定邊距）。 我是否缺少一些顯而易見的東西？

http://jsfiddle.net/R3yny/

只是CSS，謝謝。

Answer 1

根據定義，如果您的元素偏離中心有邊距，則無法居中。 聽起來像您想做的那樣，將元素放在具有響應式設計的網頁中央位置。

最好的方法是使用邊距寬度作為百分比，並關注div，直到看起來像您想要的位置為止。 檢查一下這個樣本-這真的很簡單：

http://codepen.io/staypuftman/pen/oHGAF

CSS：

.hero-text-area-container {
  background: #d6ffd1;
  float: left;
  margin: 0% 30%;
  padding-top: 20em;
  position: relative;
  width: 50%;
}

Answer 2

是否可以僅在#center_me內的另一個div上#center_me ？

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

然后您可以使用margin:0 auto; 在#center_me ，像這樣#center_me : //jsfiddle.net/nickg1/R3yny/3/ （在Opera中測試）