垂直中心への13の方法
古き良き時代には、CSSの限界は、垂直中心のような”単純な”ものでさえ課題を提起し、私たちの中にはJavaScriptのソリューションに頼っている人もいました。 それは壊れやすく、非常に制約されており、常にそれを失敗させた例外がありました。
テキストの横にアイコンや画像を配置しようとしていたか、それらの人気のある”ヒーロー”バナーのいずれかを作成しようとしていたか、モーダルオーバーレイ
しかし、CSSはそれ以来長い道のりを歩んでおり、毎回垂直方向のセンタリングを容易にする多くのメソッドを提供しています。 ここでは、そのユースケースと制限とともに、それらのいくつかの概要です。
絶対位置とマージンauto
固有のサイズを持たない要素は、上と下から等しい値を使用するだけで”中央”にすることができます。 要素に固有の寸法がある場合は、topとbottomに0を使用し、margin autoを適用します。 これは自動的に要素を中央に配置します：
.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}
ペンを参照してください
センタリング1: Facundo Corradiniによる絶対位置決め(@facundocorradini)
CodePenにあります。制限は、もちろん、要素の高さを明示的に宣言する必要があるか、コンテナ全体を占有することです。
古典的なトップ50%translate-50%
これは、多くの開発者にとって最初のものの一つであり、まだ行く-に、あります。 簡単なトリックは、親の上から50％で内部要素を絶対配置し、高さの50％に変換することに依存します。
.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}
ペンを参照してください
センタリング2: top50translateY-50By Facundo Corradini(@facundocorradini)
On CodePen.
トランジション/アニメーションを適用するときなど、他の変換の邪魔になる可能性のあるtranslateの使用が唯一の主な制限である、かなり堅実なアプロー
テーブル。 うん、私はちょうどテーブルと言いました。本当に単純なアプローチであり、最初の（当時はすべてがテーブルでした）の1つは、テーブルセルの動作とvertical-alignを使用して、コンテナ上の要素を中央に配置するこ
これは、実際のテーブル（恥、恥、恥）で行うことができ、またはセマンティックHTMLを使用して、要素の表示をtable-cellに切り替えることができます。
.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}
ペンを参照してください
Centering3:tables by Facundo Corradini(@facundocorradini)
CodePen。
これは、両方の要素の高さが不明な場合でも機能します。 主な制限はもちろん、中心のない兄弟を持つ必要がある場合であり、背景の制限が複雑になる可能性があります。また、これはスクリーンリーダーで完全に失敗することに注意してください（マークアップがdivに基づいている場合でも、CSS displayをtableとtable-cellに設定すると、スクリー それはアクセシビリティに来るときはるかに最高から。
ゴースト要素メソッド
何らかの理由で追いつかなかった別のオールディは、親の高さが100％のゴースト（擬似）要素でinline-blockを使用し、vertical-alignプロパティをmiddleに設定しています。
.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}
ペンを参照してください
センタリング4: CodepenのFacundo Corradini(@facundocorradini)
によるゴースト要素メソッド。
実際には非常にうまく機能しますが、最も顕著な”問題”は、インラインブロック要素間の空白の常に厄介な動作のため、水平方向の中心をほんの少し右に移動することです。
これは、他のコンテキストでのインラインブロックの問題と同じように扱うことができます。最も簡単なアプローチは、上記で使用したmargin-left-1chです（ch単位は”0″文字の幅を意味するため、等幅フォントを除いて100％正確ではありませんが）、またはコンテナ上でフォントサイズを0に設定し、要素上でpxまたはremにリセットします。 少なくとも言って、最適ではありません。
Margin auto on a flex-item
最後に、現代のCSSの領域に入って、flexboxは自動マージンのためのかなり素晴らしい動作を導入しました。 これで、ブロックレイアウトのように要素を水平方向に中央に配置するだけでなく、垂直軸にも中央に配置します。
.container{ display:flex;}.element{ margin:auto;}
ペンを参照してください。Facundo Corradini(@facundocorradini)
CodePenのflex-itemで5:margin:autoを中央に配置します。この戦術は、そのシンプルさのために私のお気に入りの一つですが、唯一の主要な制限は、それが単一の要素でのみ動作するということです。
flex-container上の擬似要素
世界で最も実用的なアプローチではありませんが、柔軟で空の擬似要素を使用して要素を中心にプッシュすることもでファクンドコラディーニ)
コードペンに。
これは、複数の項目を持つ列指向のflex-containerに柔軟な間隔を維持したい場合に便利です。p>
7&8. Flex-containerまたはflex-item
FlexboxのAlignには、非常に優れたalignmentプロパティも導入されました（これは独自のbox alignmentモジュールにフォークされました）。 これにより、特定の数の要素（または動的な量のための非常に巧妙なJS）のためにCSSのマジックナンバーを必要とする方法で、アイテムの配置方法と空のスペースの配布方法を制御することができます。flex-directionに応じて、必要に応じてjustify-contentまたはalign-itemsを使用して調整することができます。コンテナ上の
:
.container{ display: flex; justify-content: center; align-items: center;}
ペンを参照してください
センタリング7:Facundo Corradini(@facundocorradini)
CodePenでflex-containerに整列します。
特定のflex-itemで：
.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}
ペンを参照してください
センタリング8：Facundo Corradini（@facundocorradini）
CodePenでflex-itemに整列します。
古いブラウザをサポートする必要がある場合を除いて、これには多くの欠点はありません。 IE11は動作するはずですが、flexboxの実装は非常にバグがあるため、常に注意して扱う必要があります。 IE10は、異なる構文を持つ仕様の古い初期のドラフトに基づいており、-msベンダー接頭辞を必要とするため、追加の作業が必要です。p>
9&10. GRID-containerまたはgrid-itemに整列
CSS Gridにはflexboxとほぼ同じ整列オプションが含まれているため、grid-containerで使用できます。
.container{ display: grid; align-items: center; justify-content: center;}
ペンを参照してください
センタリング9:Grid-container by Facundo Corradini(@facundocorradini)
CodePenで。
または特定のグリッド項目だけに:
.container{ display: grid;}.element{ justify-self: center; align-self: center}
レガシーブラウザサポートの欠如は、この技術の唯一の制限です。
ペンを参照してください
センタリング10:Facundo Corradini(@facundocorradini)
CodePenのグリッド項目に整列します。
グリッド上の擬似要素
フレックスボックスの代替と同様に、擬似要素を持つ三行のグリッドを使用することができます。
.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}
1frは実際にはminmax(auto,1fr)を意味するので、空の行は必ずしもコンテナの高さの三分の一を取るとは限りません。 必要に応じて、autoの最小値まで縮小され、コンテンツなしでは0を意味します。
ペンを参照してください
センタリング11:Grid+pseudos By Facundo Corradini(@facundocorradini)
CodePen上。
これは愚かなアプローチのように見えるかもしれませんが、私のお気に入りのCSSグリッドトリックの1つを簡単に行うことができます：fr行をminmax Jenn Simmonsはこれについて素晴らしい例を持っています。
したがって、擬似が完全に折りたたみ可能な行を取ることは、自動配置アルゴリズムが実際の要素に魔法を働かせることを可能にします。 自動配置がないIEをサポートする必要がある場合を除いて。 これは次の方法につながります…
明示的なグリッド行の配置
CSSグリッドでは、アイテムを特定の行に明示的に配置できるため、上記と同じグリ 信じられないかもしれませんが、IEはCSS gridの最初の強力な支持者の1人であり、2011年にIE10でそれを出荷しました。 これは、完全に異なる構文を持つ本当に初期のドラフトに基づいていますが、それを機能させることができます：
.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}
ペンを参照してください
Facundo Corradini(@facundocorradini)
グリッドアイテムのMargin auto
flexboxと同様に、グリッドアイテムにmargin-autoを適用すると、両方の軸に中央に配置されます。
.container{ display: grid;}.element{ margin: auto;}
ペンを参照してください
センタリング12：Facundo Corradini（@facundocorradini）によるグリッド上の明示的な配置
CodePen上。
いくつかの（おそらく）将来の実装
CSS Box Alignment Module level3仕様によれば、align-contentはブロックコンテナとマルチコルコンテナのブロック軸上で動作すあなたの要素が適切に中央に配置されていることを100％確実にするためにLogRocketを試してみてください
“私のマシンではよく見えます”では十分では LogRocketを使用すると、エンドユーザーが正確にどのようにDOM（これらの厄介な垂直中心の要素と一緒に）を見ることができます。 実稼働環境のすべてのユーザーのクライアント側のCPU使用率、メモリ使用率などを監視および追跡することに興味がある場合は、LogRocketを試してください。
https://logrocket.com/signup/
LogRocketは、webアプリやサイトで起こるすべてを記録し、webアプリ用のDVRのよ 問題が発生する理由を推測するのではなく、主要なフロントエンドパフォーマンスメトリックを集計して報告し、アプリケーションの状態と一緒にユー
webアプリのデバッグ方法を近代化—無料で監視を開始します。