ディスプレイ：firefoxやsafariでflexが動作しない

Question

ここではこの問題をいくつか見てきましたが、解決策には常に少し修正が加えられました（たとえば-moz-、typosなど）。信じて）私はチェックした。私はflexを使用して、そのコンテナ内のテキストを垂直方向にセンタリングしようとしています。それはChromeで100％動作しますが、FirefoxとSafariの両方で、私はあまり運がありませんでした。私が表示しようとしているテキストは常にコンテナの外に出ています。ペンでhttp://codepen.io/drewtadams/pen/XjYrGBに、高さ/幅の設定された四角形を使用していますが、「top：65px; left：65px」よりも動的に動作する必要があります。 - インライン要素（黒い四角）はテキストになります。ディスプレイに修正がありますか：フレックス、またはこれを行うための従来の方法がより優れていますか？

HTML：

<div class="flex-container valign--center"> 
    <div class="box-container valign--center"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
    </div> 
    <div class="box-container valign--center"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
    </div> 
    <div class="box-container valign--center"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
    </div> 
    <div class="box-container valign--center"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
    </div> 
</div> 

CSS：

.valign { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: flex; 
    -webkit-justify-content: center; 
    -moz-justify-content: center; 
    justify-content: center; 
} 
.valign--center { 
    @extend .valign; 
    align-items: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
} 

.flex-container { 
    border: 1px dashed red; 

    .box-container { 

     .box1 { 
      background-color: green; 
      height: 100px; 
      width: 100px; 
      margin: 25px; 
     } 
     .box2 { 
      background-color: black; 
      display: none; 
      height: 20px; 
      width: 20px; 
      position: absolute; 
      z-index: 2; 
     } 

     &:hover { 
      .box1 { 
       opacity: 0.6; 
      } 
      .box2 { 
       display: inline; 
      } 
     } 
    }// end .box-container 
}// end .flex-container 

P.S.私はペンのフレックスコンテナの下で遊んでいる2番目のコンテナを持っています。

Answer 1

：

@mixin centerer { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

をHTML：

.parent { 
    position: relative; 
} 
.child { 
    @include centerer; 
} 

Answer 2

同じ高さに設定してから、2番目のコンテナを中央に垂直に配置するように設定してください。私はmatchHeight.jsのようなプラグインを使用します。それは非常に簡単で、各要素に一致するデータタグを置くだけで、高さが設定されます。例えばと。それはあなたのための高さに一致し、次にそれらを垂直に中心にするために基本フレックスボックスを使用します。ここ

https://github.com/liabru/jquery-match-height

いくつかのフレキシボックス垂直中心コードです。いくつかのSCSSを使用してhttps://css-tricks.com/snippets/sass/centering-mixin/で本当に簡単な解決策が見つかり

.vertical_center{ 
     display:flex; 
     flex-direction:column; 
     justify-content:center; 
     resize:vertical; 
     align-items:center; 
     min-height:25px; 
    }