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