【CSS】要素の位置を上下左右センターにする方法

    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;

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

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

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

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

関連記事