yn2011's blog

CSS で中央寄せしたいときのフローチャート

CSS による要素の中央寄せには様々な実装方法がある。状況によって使える実装が異なるし、水平方向と垂直方向でも若干実装が異なる部分があり難しい。中央寄せを実装したいときに迷わないように、どういう場合にどの実装が使えるのかをフローチャートに整理した。

水平方向

水平方向の中央寄せ

垂直方向

垂直方向の中央寄せ

両方向

両方向の中央寄せ

上記のフローチャートは mermaid で記述し、画像として export した。