Safari没有用css居中元素答案

【问题标题】：Safari not centering elements with cssSafari没有用css居中元素
【发布时间】：2015-12-15 17:38:44
【问题描述】：

对于所有其他浏览器，我的 css 可用于将页面中的任何元素居中，但不适用于 safari（在 safari 5.1.7 for windows 上测试页面），它只是把元素放在左边，就像没有应用任何样式一样。我的CSS：

    .centered {
    margin: 0px auto 0px auto;
    display:flex;
    justify-content:center;
    align-items:center;     
    }

Safari 上的样子：

|stuff                         |  
|text                          |
|more stuff                    |

我尝试过的事情：

http://www.w3schools.com/cssref/css3_pr_align-items.asp

 display:inline-block;

更多代码：

    display: block;
    margin-left: auto;
    margin-right: auto;

【问题讨论】：

没有前缀的 Safari 5 不支持 Flexbox - caniuse.com/#feat=flexbox
@Paulie_D 好的，但我的原始代码确实适用于较新版本的 safari？
您的问题是关于 Safari 5 对吧？然后你需要使用旧的语法和前缀。

标签： html css safari

【解决方案1】：

首先，Safari 5.1.7 已经过时了；您不必再专门针对它了。如果人们还在使用它，那是他们自己的错；浏览器还有很多其他选择！

也就是说，您似乎没有尝试text-align: center，这本来可以解决问题。

.centered {
  text-align: center;
}
.centered > div {
  display: inline-block;
  border:1px dotted green; /* for debugging purposes */
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

<div class="centered">
  <div>
    stuff<br>
    text<br>
    more stuff
  </div>
</div>

（你没有说你的 HTML 是什么样的，但我假设它有点像这样。）

在 Safari 5.1.7、IE8、FF3.6 和 Chromium 20 中测试。

【讨论】：

【解决方案2】：

为了解决这个问题，我使用了旧的 HTML <center> 标签。

【讨论】：