HTML | テキストを親要素の上下左右の中央に配置する
HTMLでテキスト親要素の上下左右中央（縦横中央）に配置する方法とサンプルコードを紹介しています。
HTMLでテキスト親要素の上下中央に配置する
HTMLでテキストをテキスト親要素の上下中央（縦横中央）に配置するには、親要素が高さを持っている必要があります。
縦横中央に配置する方法として「display: flex」を使った方法があります。
対象の要素が子要素全てに及びますが、シンプルな記述でテキストの縦横中央配置を実装できます。
「justify-content: center」と「align-items: center」を指定します。
<div style="display: flex; justify-content: center; align-items: center; height: 300px; background: darkblue;">
<p>テキスト</p>
</div>テキスト
また、「position」プロパティを使って縦横中央に配置する方法も一般的です。
親要素に「relative」、中央に配置するテキスト要素に「absolute」を指定します。
「top」「left」それぞれに「50％」を指定しますが、テキスト要素は左上が支点になりますので「transform」プロパティの「translate()」で基準になる位置をテキストの縦横中央に変更します。
<div style="position: relative; height: 300px; background: darkblue;">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">テキスト</p>
</div>テキスト