ブートストラップ：ページ中央のコンテンツ

Question

これは私が持っているコードです。単純なnavbarとその下にはいくつかのリンクがあります。私が望むのは、リンクがページの真中にあるということです。私は今このマージンを設定しましたが、それは画面によって異なります。誰かがヒントを持っていますか？高度な

で感謝

<nav class="navbar nabbar-inverse"> 
    <div class="container-fluid"> 
     <!--<img src="Logo.png" alt="Logo" class="navbar-brand">--> 
     <ul class="nav navbar-nav hidden-sm hidden-xs"> 
      <li class="active"><a href="index.php?pageNr=7">Home</a></li> 
      <li><a href="index.php?pageNr=5">Chemisch Lab</a></li> 
      <li><a href="index.php?pageNr=3">Fysisch Lab</a></li> 
      <li><a href="index.php?pageNr=1">Mechanisch Lab</a></li> 
     </ul> 
    </div> 
</nav> 

<div class="container-fluid"> 
    <div class="row mid"> 
     <div class="col-md-4 text-center"><a href="index.php?pageNr=5"> 
    <h1>Chemisch Lab</h1></a></div> 
     <div class="col-md-4 text-center"><a href="index.php?pageNr=3"> 
    <h1>Fysisch Lab</h1></a></div> 
     <div class="col-md-4 text-center"><a href="index.php?pageNr=1"> 
    <h1>Mechanisch Lab</h1></a></div> 
    </div> 
</div> 

CSS：https://jsfiddle.net/u6j5cw60/1/

Answer 1

$('.mid').css('margin-top', function() { 
    return ($(window).height() - $(this).height())/2 
});