Hero Areaなどで画像の上に文字を重ね、上下左右中央の位置に配置したい。

そんな時に役立つCSS設定方法をご紹介します。

position

まずpositionを使用する場合です。

まず親要素にposition: relative;を設定し、子要素にposition: absolute;を記述します。

さらに以下の記述を子要素に追加します。

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

以上で設定は完了です。

とても簡単ですね。

それでは実際のコードを見て確認してみましょう。

flexbox

次にflexboxを使用する場合です。

flexboxは要素の整理方法を自由に設定できます。

主軸がrow（左から右へ向かう水平軸）横並びの場合はalign-items: center;

主軸がcolumn（上から下へ向かう垂直軸）ブロック軸と同じ場合はjustify-content: center;

上記の用に記述すると、簡単に中央揃えができます。

こちらもコードを見てみましょう。

このように記述が違ってもレイアウトは同じになります。

どちらも非常に簡単なので、ご自分の使用している構築方法に合わせて、利用してみてください。