たった4行! CSS3 Flexboxを使った史上最短の上下中央揃え2016年版

  • 321
    いいね
  • 5
    コメント

CSSでblock要素を上下中央揃えする方法はいくつかありますが、CSS3 Flexboxを使う方法が2016年現在では一番短いコード量で済みます。

今回は、下記のようなHTMLのblock要素を上下中央揃えすることを考えてみましょう。

上下中央揃えしたいdivタグ
<main>
  <div class="redbox">
    このdivタグを中央揃えしたい。
  </div>
</main>

<style>
  .redbox {
    border-radius: 4px;
    border: 1px solid #E63E3E;
    width: 300px;
    height: 200px;
  }
</style>

この実行結果はjsdo.itで確認できますが、divタグの見栄えしかスタイルが設定されていないため、矩形は左上に配置されます。

このdivタグを中央揃えしたい

ネガティブマージンを使うと7行

まずよく知られている方法として、下記のコードのようにネガティブマージンを使った上下中央揃えがあります。

ネガティブマージンを使うと7行
html, body, main {
    height: 100%;       /* 1 */  
}

main {
    position: relative; /* 2 */
}

div {
    position: absolute; /* 3 */
    top: 50%;           /* 4 */
    left: 50%;          /* 5 */
    margin-left: -150px;/* 6 */
    margin-top: -100px; /* 7 */
}

実行結果はjsdo.itで確認できます。 この方法では7行のCSSコードが必要でした。

ネガティブマージンを使用した上下中央揃え

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

828はてブ😲を誇る記事「CSSでblock要素を上下左右中央寄せにする、イマドキの方法 | バシャログ 」で紹介されている方法です。

絶対配置して上下左右を0にすると8行
html, body, main {
    height: 100%;       /* 1 */
}

main {
    position: relative; /* 2 */
}

div {
    position: absolute; /* 3 */
    top: 0;             /* 4 */
    left: 0;            /* 5 */
    right: 0;           /* 6 */
    bottom: 0;           /* 7 */
    margin: auto;        /* 8 */
}

実行結果はjsdo.itで確認できます。 この方法では8行のCSSコードが必要でした。

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

Flexboxなら史上最短4行で上下中央揃え

さて、CSS3 Flexboxを使うと、今までのどのコードよりも短く上下中央揃えができます。🐰たった4行🐰です。また、上下中央揃えしたい要素の幅や高さを指定しなくて良いというのもメリットです。

Flexboxを使うと4行
html, body, main {
    height: 100%;           /* 1 */
}
main {
    display: flex;          /* 2 */
    justify-content: center;/* 3 */
    align-items: center;    /* 4 */
}

Flexboxなら史上最短4行で上下中央揃え

実行結果はjsdo.itで確認できます。 多分これが一番短いと思います。

でもIEでは動かないんでしょう?

安心してください! IE11以上であれば問題なく使えます。

Internet Explorerのサポートポリシー変更により、IEの対応はWindows VistaのIE9以上でよく、しかもWindows Vistaは全世界で1%ほどのシェアしかないので、実質IEの対応はWindows 7のIE11以上でよくなっている(※1)のです。これから上下中央揃えをするならば、Flexboxを使わない手はありません。また、どうしてもIE9や10でもFlexboxを使いたい場合は、ポリフィルを使うのも手です(※2)。

※1 参考記事「高まるHTML5製アプリの需要 - ICS MEDIA
※2 参考記事「CSSレイアウトにfloatはもう古い! Webデザイナー初心者でも始められるFlexbox入門」(3ページ目)

もっと短いコードがあれば教えて下さい!

冒頭に紹介したblock要素をもっと短いCSSコードで上下中央揃えができるよ! とマサカリを投げたい方がいらっしゃいましたら優しめにお知らせください。
(改行なくしたら1行で済むよ! というのは無しでお願いします💦)


(2016/08/26 追記)
よりFlexboxを体系的に学びたい方の為に、ICS MEDIAにて記事を執筆しました。
Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA