このフレックスボックス垂直アライメントの問題を解決するにはどうすればよいですか？

Question

私はMaterializeフレームワークを使用しています。それは素晴らしい作品ですが、私はすべてのページを（最小高さを使用して）ウィンドウを埋めるようにしたかったのです。これは、要素の垂直方向の位置合わせを台無しにするようです。

これは私が使用しているCSSコードです：

.valign-wrapper { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-align-items: center; 
     -ms-flex-align: center; 
      align-items: center; 
} 

これは、私は彼らが窓を埋めるように、要素の大きさを調整するために使用しているものです。ここで

function resize() { 
    var heights = window.innerHeight; 
    $(".fill-container").each(function() { 
     $(this).css("min-height", heights + "px"); 
    }); 
} 
resize(); 
window.onresize = function() { 
    resize(); 
}; 

（それがレベルである）私は垂直方向の配置を維持しながら、窓の高さに合わせたいものの一例である：

<div class="parallax-container valign-wrapper"> 
    <div class="section no-pad-bot"> 
     <div class="container fill-container"> 
      <div class="row center"> 
       <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> 
      </div> 
     </div> 
    </div> 
    <div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div> 
</div> 

そこで質問がで良いがありますフレックスボックスを使用する代わりに？そうでない場合は、の前にのフレックスボックスがテキストの中央にくるように、コンテナのサイズを変更するにはどうすればよいですか？

また、これは、それはあなたが問題を見ることができるようにリサイズ（）が呼び出されたときにどのように見えるかです：

Answer 1

は、私はあなたがこれに対処できな方法の束があると思います。しかし、あなたはmin-height: 100vhを適用するためにCSSを使うことができます。私はちょうどそれを.valign-wrapperに置き、それは.fill-containerを含む子供を中心にします。

$("h5").css("line-height", heights + "px");

が、私はそれを考える：また、あなたがページの高さを知っていれば、私は簡単な解決策が追加されるだろうと思います（スクリーンショットごとに）水平に

.valign-wrapper { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    justify-content: center; 
 
    min-height: 100vh; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="parallax-container valign-wrapper"> 
 
    <div class="section no-pad-bot"> 
 
     <div class="container fill-container"> 
 
      <div class="row center"> 
 
       <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div> 
 
</div>

Answer 2

を中央にjustify-content: centerを適用働くでしょう。 :)