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%);
}

我不能使用保证金：0自动，因为我希望div有保证金;和左：50％translateX（-50％）技术不考虑保证金。我想在调整窗口大小时保持流畅的边缘（始终使div居中并始终保持相同的固定边距）。我错过了一些非常明显的东西吗？

http://jsfiddle.net/R3yny/

Just 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上设置边距？

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

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

中心div水平带边距（CSS）

2 个答案: