条件と対応ブラウザを指定するだけで、面倒な中央寄せ用のスタイルを自動生成してくれる、便利なCSSジェネレーターを紹介します。最新のFlexレイアウトにも対応しています。
How to Center in CSSは、様々な条件を指定して、中央寄せなどのレイアウトスタイルを生成できるCSSジェネレーターです。
レイアウトは、上下左右中央寄せはもちろん、水平方向の左寄せ、中央寄せ、右寄せ、垂直方向の上寄せ、中央寄せ、下寄せを組み合わせることができます。
中央寄せレイアウトは、要素や親要素の高さ、横幅が固定なのか、可変なのか、対応ブラウザをどうするかによって必要なスタイルが異なってきます。最新のスタイルで手軽に実装したら、古いブラウザに対応していなかった！とか、複雑なスタイルを書いていたけど、最新のブラウザ対応だけならもっとシンプルで良かった！なんてことがよくあります。
How to Center in CSSは、条件を指定するだけで、最適なCSSを生成してくれるので、中央寄せレイアウトを実装する際に便利です。
なお、スタイルはインライン化して表示されます。
<div style="display:flex;justify-content:center;align-items:center;"> <div></div> </div>
条件一覧
CONTENT: 対象の要素
What do you want to center?: 中央寄せしたいレウアウトがテキストかDIV要素
Do you know how many lines of text it’ll be?: テキストの行数、不明な場合はNo
WIDTH: 要素の横幅、不明な場合はUnknownを選択
HEIGHT: 要素の高さ、不明な場合はUnknownを選択
CONTAINER: 親要素
WIDTH: 親要素の横幅、不明な場合はUnknownを選択
HEIGHT: 親要素の高さ、不明な場合はUnknownを選択
ALIGNMENT: レイアウト
HORIZONTALLY: 水平方向
VERTICALLY: 垂直方向