CSSで要素を上下や左右から中央寄せする7つの方法

こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？ 馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。 そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！ 当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo

[hujuu]

“display: flex; justify-content: center; align-items: center;”

[fobitows]

“ display: inline-block; text-align: left;”

[aoiasaba]

position:absoluteで中央

[okumuraa1]

ありがとうございますm(_ _)m

[hg_kosuke]

中央揃え　縦方向

[sssssekine]

“ display: flex; justify-content: center; align-items: center;”

[tenchikometen]

“.outer{ text-align: center; } .inner{ display: inline-block; text-align: left; }”

[yoshi-nkyma]

“CSSで要素を上下や左右から中央寄せする7つの方法”