Flexbox 中心在 Safari 中不起作用答案

【问题标题】：Flexbox center not working in safariFlexbox 中心在 Safari 中不起作用
【发布时间】：2015-08-19 01:00:23
【问题描述】：

我在使用 flexbox 使 DIV 居中时遇到了一些问题，仅在 safari 中。我认为它可能缺少 -webkit- 但似乎 safari 只需要 -webkit-？

这是目前的代码，两个类都是 .alltext 的子类，因此可以在同一个 javascript 中调用它们。

<div class ="container">

<div class = "alltext textone">
<p>Text here</p>
</div>

<div class = "alltext texttwo">
<p>Text here</p>
</div>
</div>

CSS：

 .alltext {
 color: black;
 display: hidden;
 }

 .centertext {
  margin-right: none;
  margin-left: none;
  display: flex;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-ms-flexbox;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  vertical-align: center;
  position: fixed;
  top: 0;
  margin: auto;
  margin-top: 0;
  }

 .textone {
 position: relative;
 max-width: 95%;
 text-align: center;
 font-size: 6em;
 }

.texttwo {
width: 85%;
text-align: center;
font-size: 6em;
}

谢谢

【问题讨论】：

我想知道这是否与您拥有display 的顺序有关？还有你想让它在什么版本的浏览器中工作
似乎无法在任何浏览器上运行，因此不仅仅是 Safari 问题。
css-tricks.com/snippets/css/a-guide-to-flexbox - 这是对你最好的帮助
class .centertext 没有应用于你的任何 DOM 元素

标签： html css safari flexbox

【解决方案1】：

也许这就是你要找的东西？

div{
    box-shadow:inset 0px 0px 0px 1px red;
}

 .container{
     display:-webkit-flex;
     display:-ms-flex;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction:column;
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left:0;
 }

 .textone{
     position: relative;
     max-width: 95%;
     text-align: center;
     font-size: 6em;
 }

 .texttwo {
     width: 85%;
     text-align: center;
     font-size: 6em;
 }

<div class="container">
    <div class="alltext textone">
        <p>Text here</p>
    </div>
    <div class="alltext texttwo">
        <p>Text here</p>
    </div>
</div>

【讨论】：