div要素内のテキストを上下左右中央寄せにする方法｜CSS Flexboxが簡単

2025.10.03

div内の文字を完全中央にしたい

HTML/CSSでよくあるのが、

「文字を横中央にしたい」
「上下も含めて中央にしたい」
「ボタン風デザインで中央配置したい」

というケースです。

ですが、

text-align:center;

だけでは、左右中央にはなっても、上下中央にはなりません。

一番簡単なのはFlexbox

現在もっとも簡単なのは、

display:flex;

を使う方法です。

例えば。


<div class="sample"> 中央表示 </div>

.sample{
width:300px;
height:150px;
display:flex;
justify-content:center;
align-items:center;
}

justify-content が左右中央

justify-content:center;

で、水平方向中央になります。

Flexboxでは主軸方向制御です。

align-items が上下中央

align-items:center;

で、垂直方向中央になります。

この2つを組み合わせることで、完全中央寄せになります。

高さ指定が重要

上下中央が効かない場合、

height

未指定のケースがあります。

高さが無いと、上下中央にする空間自体が存在しません。

昔ながらの方法もある

以前は、

line-height

を高さと同じにする方法もよく使われていました。

例えば。

height:100px;
line-height:100px;
text-align:center;

ただしこれは、

・1行限定
・複数行崩れる

という欠点があります。

position:absolute方式もある

古いサイトでは、

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

方式もあります。

ですが、現在はFlexboxの方がシンプルです。

Gridでも中央寄せ可能

CSS Gridなら、

display:grid;
place-items:center;

だけでも中央寄せ可能です。

かなり短く書けます。

Flexboxはレスポンシブにも強い

Flexboxは、

・画面サイズ変化
・可変要素
・スマホ対応

にも強いため、現在主流になっています。

まとめ

div要素内のテキストを上下左右中央寄せにするなら、

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

を使うのが簡単です。

特に現在は、昔ながらのline-height方式よりFlexboxを使うケースが増えています。

css

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ワイズリマインダー