どのように垂直方向にブートストラップでdivの内側のdivを中央にすることができます3

Question

私はこれしようとしている：

はこのように見えるように：

スタイルを無視して、私は垂直方向に "Pasiónpor el vestuario"を中心にしたいだけです。

これは私のHTMLコード（私はブートストラップ3を使用しています）です：

：私はこれを試してみた

#pasion-div{ 
    background-image: url("media/imagen-fondo-menu.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    min-height: 400px; 
    padding: 13px; 
} 

#pasion-texto{ 
    font-family: 'Lora', serif; 
    color: white; 
    font-size: 5em; 
    /*width: 400px;*/ 
} 

：

<div class="container-fluid"> 
    <div class="row "> 
     <div class="col-sm-12 " id="pasion-div"> 
      <div class="text-center"> 
       <h1 id="pasion-texto">Pasión por el vestuario</h1> 
      </div> 
     </div> 
    </div> 
</div> 

そして、その唯一のコンテナで使用するCSS

.vertical-align { 
    vertical-align: middle; 
    display: inline-block; 
} 

しかし、それは左上に移動しているだけです。

私はいくつかの要素の間にいくつかの矛盾があると思っています、あるいはdivがうまく整理されていないかもしれません。

Answer 1

スライダを常に全幅で使用する場合は、col-sm-12クラスをドロップすることができます（幅は常にすべての解像度で100％になります）。

#pasion-div{ 
    background-image: url("media/imagen-fondo-menu.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    min-height: 400px; 
    padding: 13px; 

    /* add these */ 
    display: table; 
    width: 100%; 
} 

#pasion-div > div {  
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

display：table-cellはIE8（including）以上で動作します。

Answer 2

私は、一般的にこれを達成するために変換を使用します。私はここであなたのための簡単な例を設定している：ブラウザのサポートのための

https://jsfiddle.net/hrmjd6ca/

チェックアウトcaniuseを：

http://caniuse.com/#feat=transforms2d

CSS

.container { 
    margin: 0 auto; 
    width: 50%; 
    height: 200px; 
    margin-top: 50px; 
    background:#c4c4c4; 
} 

.inner-container { 
    width: 20%; 
} 

.centre-aligned { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

HTML

<div class="container"> 
    <div class="inner-container centre-aligned"> 
    <div class="label">Some text</div> 
    <div class="label">hello, world</div> 
    </div> 
</div> 

Answer 3

古いブラウザをサポートする必要がない場合、あなたはこのためにフレキシボックスを使用することができます。

CSS

.flex-row {display:flex;} 

#pasion-div { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    ... 
} 

HTML

<div class="container-fluid"> 
    <div class="row flex-row"> 
     <div class="col-sm-12 " id="pasion-div"> 
      <h1 id="pasion-texto">Pasión por el vestuario</h1> 
     </div> 
    </div> 
</div> 

http://codepen.io/mbrowne/pen/kXvQyr

それともあればより広範なブラウザサポートが必要な場合は、を使用できます@マジェステックが提案したように。