Boostrapの列を垂直に中央に配置する方法

Question

このテキストを縦横にコンテナ内に配置するには、列と12の列の中に配置します。私はFlexを試しましたが、ページ内のすべてのオブジェクトを中央に移動します。ここで、このオブジェクトを中央に配置します。

HTML：

<div class="container-fluid home"> 

    <div class="row"> 
     <div class="col-md-12" id="text"> 
     <p>Hello World!</p> 
     </div> 

    </div> 

CSS：あなたはこのコードを使用することができます

.home { 
    height: 100%; 
    background-image: url(images/home.png); 
} 

#text { 

    text-align:center; 
} 

Answer 1

：拡張モードで

ビューのコードスニペットの結果を

.home { 
 
\t height: 150px; 
 
\t background-color:red; 
 
\t position:relative; 
 
} 
 

 
#text { 
 
\t position:absolute; 
 
\t top:50%; 
 
\t text-align:center; 
 
    text-align:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container-fluid home"> 
 

 
    <div class="row"> 
 
     <div class="col-md-12" id="text"> 
 
      <p>Hello World!</p> 
 
     </div> 
 

 
    </div>

Answer 2

これはcssのtransformプロパティで簡単に行うことができます。 は、しかし、あなたはあなたのメインのコンテナのような定義された高さがあることを確認する必要があります：他に

.home{height: 1000px; 
} 

か何かを、その親要素の定義された高さがないので、この場合、100％の高さでは動作しません。その後、我々は、CSSは次のようにプロパティを変換含まれます：

これはあなたの家のクラスである：

.home { 
    height: 1000px; 
    background: #ccc; 
    float: left; 
    width: 100%; 
} 

そして、あなたは少し、このようなあなたのhtmlの構造を変更する必要があります。

<div class="container-fluid home"> 
     <div class="col-md-12" id="text"> 
     <p>Hello World!</p> 
     </div> 
</div> 

その後、縦と横の中間にしたいdivにCSSプロパティを定義します。

#text{ 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
} 

これで、親divの縦または横の整列を簡単に行うことができます。