「文字を画面の真ん中にしたいのに、うまくいかない！」という経験はありませんか？
CSSには、テキストを中央に配置するための方法がいくつかあります。この記事では、横・縦・上下の中央寄せについて、初心者向けにわかりやすくまとめました。

横方向の中央寄せ

text-align: center; を使うのが基本です。

<div style="text-align: center;">
  <p>横方向に中央寄せされたテキスト</p>
</div>

縦方向の中央寄せ（上下中央）

flexboxを使えば、縦も横も中央寄せが簡単にできます。

<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <p>上下中央のテキスト</p>
</div>

transformで上下中央にする方法

古い方法ですが、transformを使って中央にすることも可能です。

<div style="position: relative; height: 200px;">
  <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    中央のテキスト
  </p>
</div>

まとめ

• 横だけなら → text-align: center;
• 上下中央なら → flexboxが便利
• transform でも中央寄せ可能（positionとの併用）

状況によって適した方法を選ぶことがポイントです。レイアウトの目的に応じて使い分けましょう！