CSS 上下左右中央配置する方法

CSSでスタイリングする際の要素の上下左右中央配置の方法を説明した記事になります。

フレックスボックスを使う方法

中央に

＜HTML ソース＞

<div>
 <p>中央に</p>
</div>

このような状態から p 要素を上下中央配置にしたい場合、 p の親要素に当たる div に display:flex を指定してあげて p 要素を flex-item にすると管理が簡単にできます。

＜CSS ソース＞

div {
 display: flex;
 justify-content: center;
 align-items: center;
}

＜ブラウザの表示＞

中央に

フレックスボックスについて詳しく知りたい場合はこちらの記事を参考にしてみて下さい。

中央に

＜HTML ソース＞

<div>
 <p>中央に</p>
</div>

この状態から絶対配置で上下左右中央配置にする場合、position プロパティを使って親要素の div と子要素 p の両方を指定して行きます。

div {
 position: relative;
}

p {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}

＜ブラウザの表示＞

中央に