CSS边距：0自动；无法在 Safari 浏览器中运行答案

【问题标题】：CSS margin: 0 auto; not working in Safari BrowserCSS边距：0自动；无法在 Safari 浏览器中运行
【发布时间】：2018-08-25 07:18:21
【问题描述】：

所以我正在开发一个相当基本的 WordPress 工作网站。对于初学者来说一切都比较顺利，但是在尝试让我的网站在多个浏览器上看起来都一样时，我遇到了一个问题。

似乎任何时候我都使用了 margin: 0 auto;在我的 CSS 中，它根本不适用于 Safari。起初我不得不添加 display:-webkit-flex;让它工作，这样就解决了一个问题......

但是现在我的 div 没有正确对齐，因为 Safari 似乎忽略了我为边距设置的规则。

谁能帮我解决这个问题？

我附上了一些屏幕截图，以便您可以看到不同之处。我会附上代码，但它实际上只在 Safari 中。 IE 和 Mozilla 在 Chrome 中的外观与预期相同。

谷歌浏览器截图：

Safari 截图：

提前感谢您查看这篇文章并可能解决我的问题。

【问题讨论】：

标签： html css safari flexbox cross-browser

【解决方案1】：

如果该行正在使用 display flex，则您不需要边距，因为 flex 默认为一行，然后 justify-content 适用于该行。

这样你就可以将 justify-content 设置为空格

justify-content

.container {
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 200px;
  height: 200px;
  background: teal;
}

<div class="container">
  <div class="row"> 
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

您可以通过在每个“项目”类上填充 justify-content: space-between; 来确保在响应时内容永远不会被触及。仍将解决您的间距问题。

要熟悉 flex 并了解所有细节，请查看 FlexFroggy 和 flex cheat sheet

【讨论】：