どのように垂直に行をコンテナにセンタリングするのですか？

Question

デフォルトでは、行は上部に揃えられます。

私はmargin-topを入れようとしました：auto; margin-bottom：auto;動作しません。 また、vertical-align：middle;また動作しません。

これは簡単に修正できますか？

おかげ

.container { 
 
background-color:black; 
 
height: 100px; 
 
} 
 

 
.row { 
 
background-color:#fff; 
 
height: 50px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    </div> 
 
</div>

Answer 1

行に設定された幅と高さと基本的に

Answer 2

.row { 
    margin: 0 auto; 
} 

、このquestion is a duplicate。この質問には、Bootstrapのさまざまなセンタリング方法が説明されています。これは、container内のrowを使用するシナリオで特に機能します。ここでは2種類の方法がある。..

// method 1 flexbox 
.container-flex { 
    display: flex; 
    align-items: center; 
} 

// method 2 translatey 
.v-center { 
    position: relative; 
    transform: translatey(-50%); 
    top: 50%; 
} 

http://www.codeply.com/go/b6wTQTzoe1

Answer 3

はヨこの

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

Answer 4

<div class="inner"> 
    <p> 
     Text 
    </p> 
</div> 

.inner { 
    height: 200px; 
    width: 300px; 
    background: orange; 
    vertical-align: middle; 
    display: table-cell; 
} 

"テキスト" のflexboxを使用することができます垂直方向に整列されなければなりません。 display table-cellは、縦線で動作します。 インライン要素でも可能であると思います。