インラインブロック（垂直中央）が表示されない - ブートストラップ

Question

レイアウトを作成するためにブートストラップを使用していますが、なぜ表示されないのかわかりません。縦書きのインラインブロック：中間が機能していません。

私はポジションアブソリュートを使用しないことをお勧めします。

JSFiddle：任意の助けをいただければ幸いですhttps://jsfiddle.net/yheep9hh/

HTML： 現在のレイアウト（ナビゲーションバーなど）を作成するために、ブートストラップ使用

<header> 
     <nav class="navbar navbar-transparent"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">hello</a></div> 
       <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a class="active" href="/Home">Home</a></li> 
         <li><a href="/Website Design">Website Design</a></li> 
         <li><a href="/Tech Support">Tech Support</a></li> 
         <li><a href="/Data Security">Data Security</a></li> 
         <li><a href="/Networking">Networking</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </header> 
    <div class="container-fluid wrapper bgImage"> 
     <div class="indexWelcome"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h1 class="text-center">Welcome To Amparo Tech</h1> 
        <h3 class="text-center">How Can We Help You?</h3></div> 
      </div> 
      <div class="row input-fixedWidth"> 
       <div class="col-md-12"> 
        <form class="homeForm" method="POST"> 
         <div class="row"> 
          <div class="col-sm-8 col-sm-push-2 col-md-8"> 
           <input class="homeFormEmail" type="text" name="email" placeholder="Email"> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-sm-8 col-sm-push-2 col-md-8"> 
           <input class="homeFormPostcode" type="text" name="postcode" placeholder="Postcode"> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-sm-8 col-sm-push-2 col-md-8"> 
           <textarea class="homeFormMessage" name="message" placeholder="Your Message or Tech Issue"></textarea> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
      <div class="push"></div> 
    </div> 
    <footer class="footer"> 
     <div class="container"> 
      <div class="row clearfix"> 
       <div class="col-md-4 text-left pull-left"> 
        <p>name</p> 
       </div> 
       <div class="col-md-4 text-right pull-right"> 
        <p>number</p> 
       </div> 
       <div class="col-md-4 text-center"> 
        <p>address</p> 
       </div> 
      </div> 
     </div> 
    </footer> 

CSS： カスタムCSS

* { 
    box-sizing: border-box; 
} 

html, 
body { 
    height:100%; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin:0 auto; 
    margin-bottom: 10px; 
} 

.wrapper { 
    min-height:calc(100% - 82px); 
    margin: 0 auto -10px; 
} 

.footer, .push { 
    height: 10px; 
} 

.navbar { 
    margin:0; 
    height:52px; 
} 

input, textarea { 
    width: 100%; 
    margin:0 auto; 
} 

.input-fixedWidth { 
    max-width:750px; 
    margin: 0 auto; 
} 

.formWrapper { 
    position:relative; 
} 


.indexWelcome { 
    display:inline-block; 
    vertical-align:middle; 
    width: 100%; 
    text-align:center; 
} 


.navbar-transparent { 
    background-color: transparent; 
} 

.homeFormEmail { 
    margin-top: 20px; 
} 

.homeFormEmail, 
.homeFormPostcode, 
.homeFormMessage { 
    text-indent: 10px; 
    margin-bottom: 15px; 
    font-size:14px; 
} 

.homeFormEmail, 
.homeFormPostcode { 
    height:40px; 
} 

.homeFormMessage { 
    height: 80px; 
    padding-top:10px; 
    resize: vertical; 
} 

Answer 1

縦型：中央; displayとうまくいく：table-cell;つまり、親divがdisplay：tableである場合です。

Answer 2

<div>ブロックを縦に並べて表示するには、ディスプレイにtableとtable-cellをそれぞれ親と子に使用する必要があります。

/* Parent */ 
.wrapper { 
    display: table; 
} 

/* Child */ 
.indexWelcome { 
    display: table-cell; 
} 

・ホープ、このことができます：

は、同じように更新さFiddle（jsFiddle）

を見てください！

Answer 3

CSSのフレキシボックスがsupported、ほぼどこにでもこれらの日であることから、それは非常に簡単に垂直配向なりますので、私は、それを使用します。

.wrapper { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
} 

デモ：https://jsfiddle.net/7totjt2p/2/

を