垂直センタリングコンテンツは、さまざまな方法でCSSで実裝できます。最も直接的な方法は、FlexBoxを使用することです。 1。FlexBoxを使用します：容器を表示するように設定します。FlexおよびAlign-Itemsと組み合わせて：センター、子要素の垂直センタリングを簡単に実現(xiàn)できます。 2。絶対的な位置決めと変換の組み合わせ：トップと左50％に設定し、翻訳（-50％、-50％）を使用してセンタリングを実現(xiàn)することにより、絶対的な位置決め要素に適しています。 3。CSSグリッド：ディスプレイを介して：グリッドと場所の項目：センター、水平、垂直のセンタリングを同時に実現(xiàn)できます。垂直センタリングのみが必要な場合は、Align-Items：Centerを使用します。これらの方法は、最新のブラウザと互換性があり、非常に実用的です。

CSSでコンテンツを垂直に中心にするのは難しい場合があります。特に、レイアウトとコンテキストによって異なる動作をするためです。しかし、最新のブラウザ全體でうまく機能する信頼できる手法がいくつかあります。

FlexBoxは最も簡単な方法です

FlexBoxを使用することは、何かを垂直に中央に集めるための最も簡単で最も一般的な方法です。必要なのはdisplay: flex 、そしてalign-items: centerを使用します。これにより、コンテンツを容器內に垂直に中心にします。

例えば：

 。容器 {
  ディスプレイ：Flex;
  Align-Items：Center;
  高さ：100px;
}

これは、ボタン、NAVアイテム、または高さに関係なくコンテンツを中心にしたいブロックレベルの要素などに最適です。

留意すべきことの1つは、コンテナ內のすべてのフレックスアイテムに影響を與えるため、特定のアイテムを1つだけ中心にしたい場合は、獨自のラッパーで分離されていることを確認してください。

変換による絶対的なポジショニング

絶対に配置されている要素を扱っている場合、FlexBoxは直接役立ちません。そのような場合、人気のあるトリックはposition: absolute （またはfixed ）とCSS変換の位置を組み合わせることです。

方法は次のとおりです。

 .Centered {
  位置：絶対;
  トップ：50％;
  左：50％;
  変換：翻訳（-50％、-50％）;
}

この手法により、要素を親のサイズの50％ずつ右に移動し、それをバックアップして、獨自の幅と高さの半分で左に移動し、効果的に中心にします。

中央に集中している要素の正確な寸法がわからない場合に特に便利です。これにより、マージンを手動で設定するよりも柔軟になります。

グリッドは別のきれいなソリューションを提供します

CSSグリッドには、コンテンツを簡単に中央に配置できる組み込みアライメント機能もあります。容器display: grid 、およびplace-items: center 、垂直と水平の両方のセンタリングが1つのラインにあります。

 。容器 {
  ディスプレイ：グリッド;
  場所 - 項目：センター;
  高さ：200px;
}

これは、特にレイアウトにグリッドを既に使用している場合は、FlexBoxの優(yōu)れた代替品です。同様に動作しますが、グリッドがメインレイアウトツールである場合、スタイルを一貫しています。

place-itemsと列の両方のアライメントを設定するため、垂直センターのみが必要な場合は、代わりにalign-items: center使用することに注意してください。

テーブルセルディスプレイプロパティやJavaScriptを使用するなど、他の方法もありますが、上記の方法は今日最も実用的で広くサポートされています。レイアウトのニーズとブラウザのサポート要件に応じて、通常、FlexBoxまたはグリッドが最善の策です。

基本的にそれだけです。

以上がCSSを使用してコンテンツを垂直的に中心にするための一般的な手法は何ですか？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。