Flexbox 中心在 Safari 中不起作用

Posted 2023-03-05

【中文标题】Flexbox 中心在 Safari 中不起作用

【英文标题】：Flexbox center not working in 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 元素

【参考方案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>