使用边距水平居中 div (CSS)答案

【问题标题】：Center div horizontally with margin (CSS)使用边距水平居中 div (CSS)
【发布时间】：2014-04-08 11:46:07
【问题描述】：

如何将有边距的 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，谢谢。

【问题讨论】：

可能有助于解释为什么要保留页边距和/或页面的其余部分是什么样的。
所以如果你想保留边距，你需要从left 中减去保留的左边距。因此，如果你有margin:0 3%，那么你的左边就变成了left:47%
@james-montagne 我有一个宽度为 100% 的容器 div，里面有一个包含网格的 div（使用同位素插件）。在网格中我可以指定排水沟，但这不会在网格 div 中产生排水沟。这就是为什么我想在这个 div 中有一个边距。
@EmileKumfa 但是我必须让保证金流动起来。有没有办法让它固定？

标签： css html center margin

【解决方案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 中测试）

【讨论】：

很有趣，谢谢。这将是一个解决方案。没有办法把它保存在两个 div 中，对吧？
据我所知，其他人可能知道！这就是我将如何解决它。 ;)
让我们看看是否有人能想出它。谢谢！
太好了，还有使用margin 0 auto而不是transform的事实

【解决方案2】：

根据定义，如果您的元素从中心偏移了一个边距，则它不能居中。听起来你想做的事情是在网页的中心位置以响应式设计保存一个元素。

完成这项工作的最佳方法是使用边距宽度作为百分比，并注视您的 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%;
}

【讨论】：

我想固定边距