CSSで要素の上下左右中央に文字を配置する[コピペOK]
パリピ研修生

要素の中で文字を上下左右中央揃えって不意にあれ?どうだっけってなるよね????

ぱりぴ

なるなる!最初の頃毎回調べてた気がする!からもうまとめるね!!!!!!!

ヒーローヘッダーが流行っていたりすることもあって、特にメインビューで文字を上下左右中央にするデザインって多い気がする。今までコーディングしてきたものの中でも、7割くらいこの中央揃えって必須で出てきてる気がするから、まとめていっくよーーーー!

左右の中央ってわりかし使うんだけど、上下ってなんだっけ。。。って多分なりがちはあるあるやと思う!!

display:table を使うver

See the Pen CSSで上下左右に文字を配置 by ここあ (@cocoadepon) on CodePen.

「mv」クラスに「display:table;
「mv__inner」クラスに「display:table-cell;」を指定。
vertical-align:middle;」で上下中央寄せ
text-align:center;」で左右中央寄せ

パリピ研修生

display:table;とかって何のために必要なの???

パリピ

vertical-align:middle;インライン要素テーブルセルでしか使えないよっっっ!

内容量(mv__inner)より高さのあるブロック(mv)で、上下中央にしたい場合に万能なのがvertical-align:middle;

display:flexを使うver

See the Pen by ここあ (@cocoadepon) on CodePen.

「mv」クラスに「display:flex;
justify-content:center;」で左右中央寄せ
align-items:center;」で上下中央寄せ
「text-align:center;」で文字を中央寄せ

  • flex boxは勉強してたら嫌というほど出てくる。使う。見る。やと思うけど、これ以外にもいろんなことができるから暇な時に、チートシートとか見るといいと思うだ!!!
ぱりぴ研修生

フレックスやれること多いから把握しきれてないかもしれぬ!!!

パリぴ

フレックスのチートシート配布してくれてるサイトあるよ♪中央寄せ以外にもたくさん使うところがあるからぜひチェックしてみてねえ

display:gridを使うver

See the Pen by ここあ (@cocoadepon) on CodePen.

「mv」クラスに「display:grid;
place-items:center;」たったこの2行であら不思議!上下左右中央に!
「text-align:center;」で文字を中央寄せ

  • place-itemsalign-itemsjustify-itemsを一括指定できるショートハンドプロパティ。

place-itemsは2つの値が指定できます!!!!1つ目の値にalign-itemsへの指定、2つ目の値にはjustify-itemsへの指定。
そして、値を1つしか指定していない場合には、どちらにもその値が使われる!!!

place-○○のプロパティは他にも何種類か種類あるので、気になる方は調べてみてもいいかも♪

transform50% ver

See the Pen by ここあ (@cocoadepon) on CodePen.

「mv」クラス(親要素)に「position: relative;
「mv__inner」クラス(子要素)に「position:absolute;
中央寄せする要素の左上を起点として上から50%「top:50%;」、左から50%「left:50%;」に移動させて要素の大きさの半分ずつを戻す
transform: translateY(-50%) translateX(-50%);」をする

ぱリピ研修生

transformで-50%!?!?!?!?!?top50%で真ん中に行かないの?

ぱりぴ

もう深いことは考えずに。そゆもの。って覚えちゃってもいいくらいこれは擬似要素のあたりでも使う。上下左右中央でpositionで中央取したい時はtop50%,left50%,transform-50%はセットで覚えちゃおう!!!!

上手に、、、画像を作れなかったけど。。。こうゆうこと!!!笑

プレフィックス指定が必要なブラウザもあるけれど、私はわりかし好きで中央揃えしたい時は一番これを使っているかもしれない!挙動が分かりやすいのと、イメージがしやすいから、flexとこれをよく使う!

さいごに

要素の上下左右中央揃え他にもたくさんあると思うけれど、実際に使ったことがあるレスポンシブ対応もしやすいものに絞ってあげてみました。実装したいデザインに合わせて最適な方法。自分の好きな方法をぜひ探して楽しいCSSライフを〜〜〜〜〜♪

COCOA

18歳からフリーランスとして生きてます★ このブログではWEB制作を中心に日常からいろいろなことを書いていきます!
パリピワールドへようこそ\(^o^)/
お仕事のご依頼はお問い合わせ又はTwitterからお願いします★

人気記事