どうも、チャーさんです。
あなたはcssで上下左右、両方とも
中央寄せしたいと思っていませんか？
左右ならtext-alignやmargin:autoで
できるけど上下ってどうやるんだ？
line-heightだとめんどいし、
と思ってるあなたに朗報記事です。
この記事を読めば、簡単に上下左右に中央
寄せできますよ！しかもレスポンシブ対応です。
ということで早速読んでみてください！
スポンサードサーチ
cssで上下左右に中央寄せする簡単で便利な方法
さて、cssで上下左右中央にしたいって
ことありますよね！
そんな時どうしたらできるのかですが、
簡単でおすすめなのは、flexを使うことです。
あなたが上下左右中央にしたいと
思ってる要素に対して、
要素名またはクラス名.{
display:flex;
justify-content:center;
align-items:center;
}
こいつをつけ加えるだけで、
上下左右で中央寄せになります！
簡単すぎて泣けますね！
(上記画像では他にも色々書いてますが、
フォントサイズとか色とか
中央寄せに関係ないやつです。
borderは中央寄せがわかりやすいよう
つけてみました。)
でちなみに、flexの他の項目について、
補足説明ですが、
justify-content:center;
というのが左右に中央寄せです。
そして、align-items:center;
が上下に中央寄せです。
なので例えばheight:400pxとかの
boxを作った時にalign-items;centerを
つければ、
上下に中央寄せになります。
ということで、
要素名またはクラス名.{
display:flex;
justify-content:center;
align-items:center;
}
をつけるだけで、上下左右に
中央寄せ完了です！
スポンサードサーチ
まとめ
ということでまとめですが、
cssで上下左右に中央寄せですが、
要素名またはクラス名.{
display:flex;
justify-content:center;
align-items:center;
}
で一発です。
line-heightなどで上下中央寄せ
しようとするよりも圧倒的に楽なので、
ぜひ使ってみてください〜！
それでは、読んでもらってありがとう
ございました。
チャーさん
