私のフレックスアイテムが中央で整列していないのはなぜですか？

Question

ページの中央に赤いボックスを中央に配置しようとしています。

フレックスコンテナを高さ100％に設定し、html、bodyを100％に設定しましたが、それでも中心を揃えません。

誰も私がなぜそれが機能しないのか理解するのを助けてくれますか？ありがとう！あなたは主軸上のフレックスアイテムを揃えるためにjustify-contentを使用

html, body { 
 
    height: 100%; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
    height: 100%; 
 
} 
 
.box { 
 
    flex: 0 0 100px; 
 
    background: red; 
 
    width: 100px; 
 
}

<div class='flex-container'> 
 
    <div class='box'></div> 
 
</div>

Answer 1

。

align-itemsを使用して、軸のフレックスアイテムを整列させます。

あなたフレックスコンテナがflex-direction: columnあるので：

• メイン軸が垂直であり、
• 交差軸は水平です。

justify-content: centerは問題ありません。

align-items: centerを追加するだけです。ここで

html, body { 
 
    height: 100%; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center;  /* centers flex items vertically, in this case */ 
 
    align-items: center; /* NEW */ /* centers flex items horizontally, in this case */ 
 
    height: 100% 
 
} 
 
.box { 
 
    flex: 0 0 100px; 
 
    background: red; 
 
    width: 100px; 
 
}

<div class='flex-container'> 
 
    <div class='box'></div> 
 
</div>

は、より詳細な説明です：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

あなたがするALIGN-項目を追加する必要が

Answer 2

.flexコンテナ

align-items: center; 

例を参照してくださいhttps://jsfiddle.net/x9gyheo6/1/