html - Flexbox 中心在 Safari 中无法工作

Question

我在使用 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;
}

谢谢

Answer 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>