ホームページ制作,WEB戦略,効果UP,岡山のニッティグリッティ

お役立ち

ニッティ・グリッティの

お役立ち情報

中央揃えの方法

UPDATE : 2021.3.17

投稿者 : ニッティ・グリッティ

コーディング

CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、

CSSのFlexboxを使う方法が現在では一番手軽です。中央揃えしたい要素の親に対してたった3行記述するだけです。

最新ブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィックスなしで動作します。

CSS

▼ CSS

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

▼ 画像をウインドウの上下中央に配置する例

本記事では、この上下中央揃え方法の具体的な使い方を紹介。また、CSSには他にもレイアウト手法があるのであわせて紹介します。

使い方
次のようなHTML、CSSで実現されるボックスを上下中央揃えすることを考えてみましょう。

HTML

▼ HTML

    <div class="container">
        <div class="box"></div>
    </div>

▼ CSS: コンテナー、ボックスの見た目の設定

CSS

.container {
        border: 2px solid #1b0303;
        box-sizing: border-box;
        width: 100%;
        height: 300px;
    }


    .box {
        background-color: #f53838;
        width: 300px;
        height: 200px;
    }

.boxを.containerに対して上下中央揃えにするためには、containerに対して3行のCSSコードを追加するだけです。

▼ CSS: 上下中央揃えのためのコード

CSS

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

黒枠で囲まれた.containerに対して、赤の.boxが上下中央揃えになっています。 IE 11でも意図通りのレイアウトになっています。

Flexboxにおいてjustify-contentプロパティは主軸方向の並び方を、align-itemsは交差軸方向の並び方を設定します。

各々centerを指定することで、直下の要素の上下中央揃えが実現できるのです。

他の上下中央揃え方法との比較では、本当にFlexboxによる上下中央揃えが最短なのか、他のレイアウト方法と比較してみましょう。

ネガティブマージンを使うと6行〜4行

よく知られている昔ながらの方法として、ネガティブマージンを使った上下中央揃えがあります。この方法では6行のCSSコードが必要でした。

また、Flexboxによる上下中央揃えと違い、ボックスの縦幅・横幅に応じてマージンの値を変更する必要があります。

CSS

▼ CSS

    .container {
    position: relative;
    }

    .box {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    }

leftプロパティ、topプロパティ部分にcalc()を用いると、4行になります。

CSS

▼ CSS

    .container {
    position: relative;
    }

    .box {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 100px);
    }

絶対配置して上下左右を0にすると7行

要素を絶対配置して、上下左右を0にする方法です。この方法では7行のコードが必要です。

CSS

▼ CSS

    .container {
    position: relative;
    }

    .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }

CSS Gridを使うと2行

CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。

CSS

▼ CSS

    .container {
    display: grid;
    place-items: center;
    }

ただし、IE 11の対応が必要な場合は、CSS Gridによる上下中央揃えは不可能です。

place-itemsプロパティがIE 11に非対応のためです。

margin: auto;を組み合わせると2行で済む

次のようにmargin: auto;を組み合わせると2行で済みます

CSS

.container {
    display: flex;
    }

    .box {
    margin: auto;
    }

こちらの手法でも、最新ブラウザ、IE 11で動作しますが、次の点に注意する必要があります。

親要素と子要素の両方にスタイルを設定する必要がある

インライン扱いの要素には適用できないため、ブロック扱いの要素に変更が必要（後述の応用例2はimgにdisplay: block;の指定が必要）

筆者的には、これらの注意が必要ない冒頭のコードが手軽だと感じています。

Flexboxによる上下中央揃えの応用例

ここからは、Flexboxによる上下中央揃えを使った応用例を見てみましょう。

応用例1: テキストを上下中央揃えテキストを上下中央揃えする例です。

text-alignプロパティやvertical-alignプロパティを用いることなく、テキストが親要素に対して上下中央揃えになります。

HTML

▼ HTML

    <p class="paragraph">
    こんにちは、鈴木一郎です
    </p>

▼ CSS

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

応用例2：全画面に対して要素を上下中央揃えにする全画面の上下中央に要素を配置する例です。

HTML


▼ HTML

    <body>
    <img src="images/logo.png" alt="">
    </body>

▼ CSS

    html,
    body {
    width: 100%;
    height: 100%;
    }

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

ウインドウ幅を変えても、配置した画像は常にウインドウに対して上下中央の位置に配置されます。

まとめ Flexboxによる上下中央揃えは、たった3行で済む点と、ボックスの横幅・縦幅に応じて指定の変更が不要な点において、他のレイアウト手法よりも便利です。IE 11でも問題なく動作するので、実案件でも今すぐ取り入れることができます。ボックスレイアウトを行う場合は、今回の上下中央揃えの手法を積極的に使ってみてはいかがでしょうか？