HTMLで文字を真ん中に表示するにはどうすればいいですか？

Webページを作成する際、文字を中央揃えにしたい場面は多くあります。本記事では、HTMLで文字を真ん中に表示する方法について、具体例を交えながら詳しく解説していきます。

タグは非推奨

以前は、

タグを使うことで簡単に文字を中央揃えにすることができました。例えば、以下のように記述します。


<center>このテキストは中央揃えになります。</center>

しかし、

タグはHTML4.01で非推奨となり、HTML5では完全に廃止されました。現在では、スタイルシート(CSS)を使用することが推奨されています。

CSSを使用することで、より柔軟かつ正確に文字を中央揃えにすることができます。主な方法として、以下の3つをご紹介します。

text-align: center; を使用することで、指定した要素内のテキストを中央揃えにします。段落(<p>)や見出し(<h1>など)のテキストを中央揃えにする場合に有効です。


<p style="text-align: center;">このテキストは中央揃えになります。</p>

ブロック要素全体を中央揃えにするには、margin: auto; を使用します。ただし、この方法は要素の幅が指定されている場合にのみ有効です。


<div style="width: 500px; margin: 0 auto;">
  このブロック要素は中央揃えになります。
</div>

flexboxは、要素の配置を柔軟に制御できる機能です。justify-content: center; を使用することで、要素を水平方向の中央に配置することができます。


<div style="display: flex; justify-content: center;">
  <p>この要素は中央揃えになります。</p>
</div>

上記の方法をまとめた表を以下に示します。

目的	CSS	備考
テキストの中央揃え	`text-align: center;`	段落や見出しのテキストに有効
ブロック要素の中央揃え	`margin: auto;`	要素の幅が指定されている必要がある
flexbox を使用した中央揃え	`display: flex; justify-content: center;`	要素の配置を柔軟に制御可能

それぞれの方法にはメリット・デメリットがありますので、状況に応じて使い分けるようにしましょう。

A1.

タグはHTML5では廃止されているため、使用は推奨されていません。代わりにCSSを使用しましょう。

A2. 要素の幅が指定されていない場合や、親要素のスタイル設定が影響している可能性があります。要素の幅を指定するか、親要素のスタイルを確認してみましょう。

A3. display: flex; と align-items: center; を組み合わせることで、縦方向にも中央揃えにすることができます。詳細はflexboxについて調べてみてください。