CSSで要素を上下左右中央(縦横中央)配置する方法【CSS】

CSSで要素を左右中央配置にするには、インライン要素(またはインラインブロック要素やテキスト)であればtext-align: center;、ブロック要素はmargin: 0 auto;で比較的簡単にできます。(他にもいくつか方法はあります)
ですが、少し複雑になるのが上下中央配置です。
今回は上下を含めた上下左右(縦横)の中央配置(中央寄せ)について解説していきます。

display: flex;を使った上下左右中央配置

まずは、Flexbox(フレックスボックス)を使った方法です。
この方法で上下左右中央配置にするには、親要素に対しdispaly、justify-content、align-itemsプロパティの3つを指定してあげる必要があります。

<div>
    <p>display: flex;を使った上下左右中央配置</p>
</div>

div {
    display: flex;
    justify-content: center;
    align-items: center;
}
p {
    width: 200px;
    padding: 15px;
    background-color: #8FC051;
}

display: flex;でFlexboxに変更して、justify-content: center;で左右中央配置、align-items: center;で上下中央配置にしています。

Flexboxの場合は、以下のようなコードでも上下左右中央配置にする事も出来ます。

div {
    display: flex;
}
p {
    width: 200px;
    padding: 15px;
    margin: auto;
    background-color: #8FC051;
}

上記のように、親要素へのjustify-content、align-itemsプロパティの指定の代わりに、子要素にmargin: auto;を指定する方法もあります。
上記の場合は、単一要素の場合は有効です。複数子要素の場合は挙動が少し変わってきますので注意してください。

display: grid;を使った上下左右中央配置

続いてはGridレイアウトを使用する方法です。
親要素に対し、display: grid;とplace-items: center;を指定する事で上下左右中央配置が可能です。

<div>
    <p>display: grid;を使った上下左右中央配置</p>
</div>

div {
    display: grid;
    place-items: center;
}
p {
    width: 200px;
    padding: 15px;
    background-color: #8FC051;
}

Gridレイアウトの場合は、子要素が複数だったり、子要素の幅が不定な場合(グローバルナビやタグクラウドなど)は向いていないので、その場合はFlexboxを使用した方が無難です。

position: absolute;を使った上下左右中央配置

次に、positionプロパティを使用した要素の配置で上下左右中央寄せにする方法です。
親要素にposition: relative;を指定し、子要素にposition: absolute;と位置の指定をする方法となります。

<div>
    <p>position: absolute;を使った上下左右中央配置</p>
</div>

div {
    height: 200px;
    position: relative;
}
p {
    width: 200px;
    padding: 15px;
    background-color: #8FC051;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

上記例では、親要素にposition: relative;で配置の基準ブロックに指定し、子要素をposition: absolute;で親要素を基準に絶対配置指定、top: 50%;、left: 50%;で上と左から50%の位置を指定、transform: translate(-50%,-50%);で自身の幅と高さの分マイナスする事で上下左右中央配置にしています。

少し前まではこの方法が主流でよく使用していました。今でも使用する場面は多々ありますので覚えておいて損はありません。
また、以下の記述でも同じく上下左右中央配置にする事が可能です。

div {
    height: 200px;
    position: relative;
}
p {
    width: 200px;
    padding: 15px;
    margin: auto;
    background-color: #8FC051;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

子要素に、margin: auto;とtop・bottom・left・rightをそれぞれ0に指定する事で上下左右中央配置する事が可能です。この方法では、子要素がブロック要素である必要がありますので注意してください。

この方法での配置については以前、position:absolute;での縦横中央配置【CSS】で解説していますので参考にしてみてください。

さいごに

いかがでしたでしょうか。
今回は、CSSで要素を上下左右中央(縦横中央)配置する方法を解説しました。
いくつかある方法の特性をしっかりと覚えておく事で、場面に応じた最適な方法を選ぶ事が出来ますのでぜひ覚えておくようにしてください。