フレックスボックスコンテナ自体をセンターに置くには？

Question

フレックスボックスの新機能ですが、問題が発生しています。私はフレックスボックスコンテナをウェブページに関してセンタリングしようとしていますが、まだ動作していません。ここに私の構文は次のとおりです。

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
}

<div id="container"> 
 
    <h1>hello></h1> 
 
    <h1>world></h1> 
 
</div>

あなたは私ください助けることができますか？

Answer 1

アラインメントアイテム：フレックスボックスの中心。

#container { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-flow: column; 
 
    align-items: center; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<div id="container"> 
 
    <h1>hello></h1> 
 
    <h1>world></h1> 
 
</div>

Answer 2

フレックスコンテナにある程度の高さを与えるか、デフォルトでheight: auto（コンテンツの高さ）にする必要があります。

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; /* vertical alignment */ 
 
    align-items: center;  /* horizontal alignment */ 
 
    height: 80vh; 
 
    background-color: lightyellow; 
 
} 
 

 
h1 { margin: 0; }

<div id="container"> 
 
    <h1>hello></h1> 
 
    <h1>world></h1> 
 
</div>

あなたの目標は、実際には（この場合には、それはbody要素になり、親に#containerにあなたが持っている同じルールを使用し、その後、ページ上のフレックスコンテナを中央にある場合）。

Answer 3

、水平方向に整列させる代わりjustify-contentのtext-align:centerを使用します。

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    text-align: center; 
 
}

<div id="container"> 
 
    <h1>hello></h1> 
 
    <h1>world></h1> 
 
</div>