【HTML/CSS】初心者でも簡単！CSSだけで文字や画像を縦横中央揃えする方法

縦横中央揃えしたいパターンはWeb制作をしていると必ず直面します。
方法はいくつかありますが、その中でもあまり難しくなく簡単な方法を２点ほどご紹介します。

flexで縦横中央揃え

まずは『display: flex;』を使った縦横中央揃えの方法です。

いわゆるflexboxを使った縦横中央揃えで、flexboxは今やfloatに変わってメジャーで使用されているCSSですので、こちらの方が使いやすい方はこちらをご使用ください。

コードは以下の通りになります。

See the Pen Untitled by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

対して難しいことはしていません。
『justify-content』で左右、『align-item』で上下を中央揃えしています。

position+transformで縦横中央揃え

次は『position: absolute;』と『transform』を使用した縦横中央揃えです。

コードは以下になります。

See the Pen Untitled by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

『position: absolute;』で絶対配置として、上から50%、左から50%の位置につけます。
でもそれだと要素の真ん中から50％でとっているわけではないので真ん中にはきません。
ですので、『transform: translateX translateY;』で縦軸と横軸を調整します。

要素の端が拠点となっているのであれば、要素の半分を元の方向に戻せばちょうど真ん中になる理屈になります。
ですので、それぞれ50％ずつ戻して要素を真ん中に調整しています。

まとめ

色々なやり方がありますが、僕は主にこの２つを使用しています。

ですがこのやり方が絶対に正解というものではないです。
他のCSSを崩さないようにしないといけないので、どのような使用場面かによってはこの２つ以外が最適解の場合もあります。

Webデザインは常に勉強です。
たくさんの方法をインプットし、それぞれのデザインにあった方法を使用しましょう。

ちきんまさBLOG