この記事では、かつては扱いにくいが、実裝しやすいさまざまなCSS水平および垂直センタリング方法を紹介します。 FlexBoxとPositioning Plus Transformationを使用して、水平および垂直のセンタリングをカバーします。別の記事では、水平および垂直のセンタリングにCSSグリッドを使用する方法も取り上げます。

キーポイントの概要

概要

• FlexBoxの使用垂直中心のテキストとアイコンを使用します。コンテナをFlexコンテナに変換し、justify-contentおよびを使用して、中央の子要素に使用します。 align-items
• とpositionの組み合わせは、特に非常に可変的な要素の場(chǎng)合、垂直センタリングを?qū)g現(xiàn)できます。これは、位置決めコンテキストを作成し、そのコンテナに対する要素の位置を調(diào)整することによって行われます。 transform
• 屬性は、固定された高さのコンテナ內(nèi)の単一のテキストまたはアイコンを垂直に中央に集中させるために使用できますが、line-heightはインライン要素の中心に使用できます。 vertical-align

flexboxを水平および垂直センターに使用する方法

FlexBoxは、要素を水平および垂直に整列させることができ、それにより、テキスト、アイコン、またはCSSのその他の要素を中心に配置できます。

FlexBoxセンタリング要素を使用するには、次のコードスニペットを使用できます。

このコードスニペットは、

をフレックスコンテナに変換し、子要素をFlexプロジェクトに自動(dòng)的に変換します。その後、

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

を使用して、これらのフレックスアイテムを水平に中央に配置し、

を使用して垂直に中央に配置できます。 .container 例：justify-contentcodepen linkalign-items

続行して、ボックスモデルの垂直方向の位置決めと位置決め技術(shù)について學(xué)びます。

柔軟な垂直センタリングを?qū)g現(xiàn)するために位置と変換を使用する方法

FlexBoxを使用できない場(chǎng)合、またはコンテナにアイテムを中央に配置する必要がある場(chǎng)合は、を使用してコンテナの中央に要素を配置できます。

代わりに、

を組み合わせて、垂直に中心に変換される非常に可変的な要素に変換できます。たとえば、ビューポートの高さ全體に垂直に要素を中央に配置するには、次のコードスニペットを使用できます。 position

最初に、コンテナ要素に

を設(shè)定して、位置決めコンテキストを作成します。これにより、その境界內(nèi)にposition要素を見つけることができます。

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

次に、要素の左上隅を配置して、親要素の上部の50％に上端を配置し、左端を左端の左の50％に配置することで、コンテナの中央に配置します。親要素の場(chǎng)所。

position: relative最後に、高さの50％と幅の50％を左に上にパンすることで、要素を中央に戻します。これで、私たちの要素は、容器內(nèi)の垂直および水平方向に中央に配置されています。配置は、要素のサイズに対するパーセンテージ?jìng)帳蚴褂盲筏菩肖铯欷毪郡?、コンテナまたは子要素の幅または高さが変更された?chǎng)合、要素は中心のままになります。 .vertical-center 例：

codepen link

ラインハイイトを使用して固定された高さで垂直に中央に集中する方法< コンテナ內(nèi)に垂直にテキストまたはアイコンの単一行を中央に配置するには、

屬性を使用します。このプロパティは、テキスト実行のラインの高さを制御し、インライン要素のワイヤフレームの上と下の等量のスペースを追加します。容器の高さがわかっている場(chǎng)合、同じ?jìng)帳?p>を設(shè)定すると、子要素が垂直に去勢(shì)されます。 line-height line-height

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

インライン要素の中心に垂直アライを使用する方法

屬性は、

、

、またはvertical-alignとして表示される要素のみに影響します。 inline inline-block長(zhǎng)さ、パーセンテージ、またはキーワード値が必要です。 table-cell

長(zhǎng)さとパーセンテージは、要素のベースラインを親子要素のベースラインを上回る距離を整列させます。

キーワード値は、次のいずれかです

• baseline
• sub
• super
• text-top
• text-bottom
• middle
• top
これらのほとんどは非常に直感的ですが、ベースラインを親要素のサブスクリプトベースラインに並べ、
• 要素のベースラインを親子要素の上付き文字ベースラインに合わせます。 bottom
実用的な例で

を見てみましょう。

subここに畫像とテキストグリッドがあり、どちらも高さが異なります。つまり、テキストがすべてきれいに揃っているわけではありません。 super

（元のテキストのHTMLコードをここに挿入し、それに応じて修正する必要があります。

グリッドコンテナをvertical-alignに設(shè)定し、畫像上の

を使用して、すべてをきちんと並べることができます。

ここにテキストがなく、すべての畫像を垂直に中央に配置したい場(chǎng)合は、

を使用して、かなり良い結(jié)果を得ることができます。

その他のセンタリング方法については、水平および垂直センタリングにCSSグリッドの使用方法を確認(rèn)してください。 display: inline-block vertical-align: bottom

cssで垂直にテキストとアイコンを中央に集中させる方法についてのfaq

vertical-align: middle

（元のFAQパーツがここで合理化され、コア情報(bào)を保持し、いくつかの答えをより明確に表現(xiàn)しています。）

）

垂直アライメントとは何ですか？ CSSの垂直アライメントは、垂直軸に沿った要素の位置を制御する屬性です。これは、レイアウトを正確かつ柔軟に設(shè)計(jì)するのに役立つ強(qiáng)力なツールです。要素の中心を垂直に使用したり、コンテナの上部または下部に整列したり、垂直空間に均等に配布することもできます。 CSSの

屬性は通常、インラインまたはインラインブロック要素で使用されますが、テーブルセルでも使用できます。

CSSを使用してテキストを垂直に中心に使用する方法は？

およびvertical-alignを使用して、テキストを垂直に集中させることができます。

垂直方向のアライメントを使用してブロックレベルの要素を処理できますか？

ブロックレベルの要素は、position: relative; top: 50%; transform: translateY(-50%);を使用して垂直に整列できます。

なぜ私の垂直方向のアライメントが機(jī)能しないのですか？

原因には、高さを指定しない親コンテナ、またはvertical-alignを使用してブロックレベルの要素を整列させようとすることが含まれます。

畫像を垂直に整列させる方法は？

テキストと同じ方法を使用できます。

CSSグリッドを処理するために垂直アライメントを使用できますか？

屬性を使用できます。 align-items

ボタンでテキストを垂直に整列する方法は？

は、

屬性とともに使用できます。その値は、ボタンの高さと同じでなければなりません。 line-height

複數(shù)の要素を垂直に整列させる方法は？

フレックスまたはグリッドメソッドを使用できます。

垂直アライメントを使用して絶対的な位置決めを処理できますか？

および

プロパティを使用できます。 top transform

テーブルセルにテキストを垂直に整列する方法は？

使用できます

。

以上がCSSのテキストとアイコンを垂直に集中する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。