この記事は最終更新日から2年以上経過しており、内容が古くなっている可能性があります。
ご理解の上、記事を閲覧いただければと思います。

上記の画像のように、「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とlefｔの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つの方法」を紹介しました。