私は上部に固定位置のナビゲーション バーがあるコースに取り組んでいます。背景の高さは 100vh に設定され、テキスト コンテンツを含む div は背景の中央にあります。 Flexbox を使用するとほぼ中央に配置されますが、実際に背景の中央に配置するには、div の高さを高さの 100% に設定する必要があります。フレックスボックスとビューポートの高さについてはある程度知っていますが、ダイブを真に中央に配置するには、なぜ div の高さを 100% に設定する必要があるのか混乱しています。私が求めていることを再現するには、ここに背景として任意の画像を配置できると思います。ここでの説明が理解できれば幸いです。
リーリー リーリー
ああああ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私の理解が正しければ、デフォルトではコンテンツが水平方向に中央揃えになると言っていますが、コンテンツを垂直方向に中央揃えにするには、div には
height: 100%が必要です。Div はブロック要素であり、デフォルトでは:
を意味します。autoです)。div がコンテンツ中心の Flexbox の場合、コンテンツが垂直方向の中央に配置されていても、div はその中で最も高い要素を収めるために必要に応じて下方向にのみ拡張されます。 div は依然として画面の上部にあるため、そのコンテンツが div 内で垂直方向の中央に配置されている場合でも、div の高さはコンテンツと同じだけであり、div が高さであるため、コンテンツは画面の上部に表示されます。画面の上部にあります。
ただし、div の
height: autoデフォルト属性はオーバーライドできます。高さを100%に設定すると、div は親要素 (ページ) の高さの 100% になります。 div はコンテンツに大量の追加スペースを与え、Flex ルールのおかげで、コンテンツはその追加スペースの垂直方向の中央に配置されます。これをさらに一歩進めるには、
border: 5px 破線黒を div に追加して、そのサイズと位置を確認してから、unsetのような別の高さの値を使用してみてください。 、100%、50%など。試してみて試してみてください！