高さ100％のフレックスボックス垂直センター

Question

バックグラウンドカラーのためにフレックスボックスを縦横にセンタリングすることはできますか？

.wrapper { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    text-align: center; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    background-color: green; 
 
    align-self: center; 
 
    justify-content: center; 
 
}

<div class='wrapper'> 
 
    <div class='item'> 
 
    sdafsdfs 
 
    </div> 
 
</div>

私はheight: 100%を追加する場合、テキストはトップに戻る移動します。

Answer 1

ディスプレイを追加：アイテムにフレックス。それで、あなたの必要条件に従って、その中のアイテムだけを整列させることができます。更新されたコードを見てください。

.wrapper { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    text-align: center; 
 

 
} 
 

 
.item { 
 
    display: flex; 
 
    background-color: green; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
    width: 100%; 
 

 
}

<div class='wrapper'> 
 
    <div class='item'> 
 
    sdafsdfs 
 
    </div> 
 
</div>

・ホープ、このヘルプ