上記の画像のように、「CSSで要素を縦横センター配置したい」場合、絶対値(XXXpxなど)で位置を指定するのは得策ではありません。

昨今のレスポンシブWebデザインや、多様化しているデバイス(タブレットやスマホ)サイズに即した実装方法ではないからです。

そこで今回は、レスポンシブや様々なデバイスサイズにも適応する「CSSのみでHTML要素を上下左右(縦横)センター揃えにする」3つの方法を紹介します。
(※この記事はCSS中級者向けの内容となります)

要素の上下左右中央揃えのHTML例・CSS例

冒頭の画像のHTMLおよび、背景・BOXの見た目のCSSを以下としておきます。

HTML

<div class="wrap">
<div class="alert">上下左右中央に表示したい幅600px高さ30pxのBox</div>
</div>

CSS

.wrap { /* BOXの背景 */
    position: relative;
    width: 100%;
    height: 500px;
    background: url(css_center_middle_wrap_bg.jpg);
}
.alert{ /* 黒いBOXの見た目 */
    color: #FFF;
    background: rgba(100,100,100,0.9);
    text-align: center;
    padding: 10px;
		}

方法1. 要素を背景画像にして上下左右センターにする

.alert {
    height: 500px;
    background-image: url(./img/bg.png); /* 黒いBOX自体を背景画像にする*/
    background-position: center center;
}

旧来からある方法で、改めて紹介するまでもなさそうですが、一応記載しておきます。

ただ、(上下左右中央揃えにしたいHTMLを削除し)背景画像にするため高さを指定する必要がありますし、要素を背景画像ではなくHTMLで出力したい場合は使えません。

方法2. calc()関数を使って要素自身の半分のサイズを引く

「calc()」は、CSS3から登場した、計算式を記載できる関数で以下のように記述します。

.alert {
    position: absolute;
    width: 600px;
    height: 30px;
    left: calc(50% - 300px);
    top: calc(50% - 15px);
}

calc()を使って、topとleftの50%の位置から要素自身の持つ高さ(height)と幅(width)の半分を引くことで、上下中央に据える書き方です。

最近では割とメジャーな書き方ですが、自分自身のサイズの「半分」を絶対値として記載するため、若干汎用性に欠けます。

方法3. top/bottom/left/right を0に設定し、margin:autoを指定する

.alert {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 600px;
    height: 30px;
    margin: auto;
}

幅と高さだけは指定する必要がありますが、最も再利用しやすい書き方といえるかもしれません。

なぜ、この書き方で要素が上下左右の中央揃えになるのか、詳しい仕様については、以下の記事にて詳しく解説されています。

ある要素を上下左右中央配置にしたい場合、絶対配置 (position: absolute;) にした上で、top / bottom / left / right 各プロパティに対して 「auto」 以外を設定し、margin: auto; をあわせて指定すると CSS の仕様を正しく解釈するブラウザ上では実現できるよ。

position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

この方法なら、rightやleftを変更すれば、例えば要素を「上下のみ中央揃えで右よりにする」ことも容易ですし、使いやすそうです。


ということで、方法1.はともかく、方法2と3については、使用箇所や回数によって使い分けるのが良いかもしれません。

以上、「CSSのみでHTML要素を上下左右(縦横)センター揃えにする3つの方法」を紹介しました。

最近、CSSのリファクタリングと設計(レギュレーション策定)について学びなおしていますが、体系的に学ぶなら以下の書籍がオススメです。