HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法

この記事では、HTMLとCSSを使ってpタグ内のテキストを高さ400pxのボックス内で上下中央に配置する方法を紹介します。

CSSを使用した縦方向の中央揃え

HTMLのpタグに適用されたスタイルのみを使用して、テキストを縦方向に中央揃えすることは簡単です。 以下の例を見てみましょう。

テキスト

この例では、display: flexをpタグに適用することで、フレックスボックスコンテナを作成します。 フレックスボックスは、その子要素を柔軟に配置することができる非常に強力なレイアウトシステムです。

次に、align-items: centerプロパティを使って、テキストを縦方向に中央揃えにします。 これにより、テキストはコンテナの高さ（この例では400px）に関係なく常に中央に配置されます。

結論

CSSのdisplay: flexとalign-items: centerを組み合わせることで、HTMLのpタグ内のテキストを縦方向に中央揃えにするのは非常に簡単です。 この方法は、レスポンシブデザインにも適しており、異なる画面サイズに対応する際にも役立ちます。