[CSS] 上下左右中央に表示する５つの方法（IE, Edge, Chrome, Safari, Firefoxに対応）

こんにちは、@yoheiMuneです。
マークアップする際に「上下左右中央に表示したい」という要件はよく出てきます。今日はその実装方法をブログに書きたいと思います。５つあるので、色々な状況に応じたものを選んで使えると思います。

目次

なぜこの記事を書くのか

プログラミングスクールの講師をしていて、上下左右中央に表示する方法をアドバイスさせて頂く機会もあり、ブログにまとめておきたいと思ったのが執筆のきっかけです。複数の実現方法を提示することで様々な条件に応じることができますし、また各種ブラウザ（IE、Edge、Chrome、Safari、Firefox）の対応状況も確認済みなので、品質の良いコーディングができると思います。

これからWebページ制作をされる方に、少しでも役立てたらいいなと思います。

方法1：absolute + top,left=50% + ネガティブマージン

position: absoluteで絶対配置する際に、topとleftを50%として真ん中を指定して、要素の横幅と縦幅それぞれ半分をネガティブマージンとして設定する（=マイナス値をmarginに指定する）ことで、上下左右中央に表示することができます。

<div class="container">
    <div class="item"></div>
</div>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .item {
        /* 要素の大きさを指定する */
        width: 150px;
        height: 150px;

        /* top と left に 50% を指定して、要素の左上を中央にする. */
        position: absolute;
        top: 50%;
        left: 50%;

        /* 要素の大きさの半分をネガティブマージンとすることで、要素を画面中央にする. */
        margin-top: -75px;
        margin-left: -75px;
    }
</style>

(表示例)

(サポートブラウザ)

IE11	Edge	Chrome	Safari	Firefox
○	○	○	○	○

方法2：absolute + top,left=50% + translate

方法1と似ていますが、ネガティブマージンの代わりにtranslateを使います。translateで縦横それぞれ半分の長さずつ動かすことで、上下左右中央に表示できます。こちらの方法は、要素の大きさが可変でも中央に表示できるので、柔軟性があります。

<div class="container">
    <div class="item">おはよう<br>こんにちは<br>おやすみなさい</div>
</div>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .item {
        /* top と left に 50% を指定して、要素の左上を中央にする. */
        position: absolute;
        top: 50%;
        left: 50%;

        /* tarnslate で要素の縦横それぞれ50%分の長さを動かすことで、要素を中央にする. */
        transform: translate(-50%, -50%);
    }
</style>

(表示例)

(サポートブラウザ)

IE11	Edge	Chrome	Safari	Firefox
○	○	○	○	○

方法3：absolute + top,bottom,left,right=0 + width,height + margin=auto

この方法は少し手品のようですが、次の4つの条件が成立する場合、上下左右中央に表示されます。

1. positionがabsoluteである
2. top, bottom, left, rightが全て0である（※）
3. marginがautoである
4. width,heightがauto以外である

※ 正確には0である必要はありませんが、0にすることが多いです。詳細は後述の説明リンクをご参照ください。

<div class="container">
    <div class="item"></div>
</div>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .item {
        /* 1. absolute にする. */
        position: absolute;

        /* 2. top, bottom, left, right を 0 にする. */
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        /* 3. width, height を auto 以外にする. */
        width: 150px;
        height: 150px;

        /* 4. margin を auto にする. */
        margin: auto;
    }
</style>

(表示例)

(サポートブラウザ)

IE11	Edge	Chrome	Safari	Firefox
○	○	○	○	○

上記はちょっと不思議ですが、cssの仕様でそのように動作します。詳細は「position: absolute; の指定で要素が上下左右中央配置になる理由」を読んでみてください。

方法4：display=flex

display: flex、align-items: center、justify-content: center を使うと、簡単に上下中央寄せにできます。絶対配置でない場合に中央表示にするなら、この方法がシンプルで便利です。

<div class="container">
    <div class="item">おはよう<br>こんにちは<br>おやすみなさい</div>
</div>
<style>
    .container {

        /* flexbox を用いて、上下左右中央に表示します. */
        display: flex;
        align-items: center;
        justify-content: center;

        width: 300px;
        height: 300px;
    }
    .item {
        /* 中身の要素はCSSの指定なしでOK */
    }
</style>

(表示例)

(サポートブラウザ)

IE11	Edge	Chrome	Safari	Firefox
○	○	○	○	○

Bootstrap4 でも積極的に採用されている方法で、様々なサイトで利用されています。

方法5：vertical-algin=middle

少し古典的な方法ですが、display: tableとdisplay: table-cellを用いてテーブル表現を行い、vertical-align: middleで上下中央表示に、text-align: centerで左右中央に表示できます。

<div class="container">
    <div class="item"><span>おはよう<br>こんにちは<br>おやすみなさい</span></div>
</div>
<style>
    .container {

        /* table 要素として表示する. */
        display: table;
        width: 300px;
        height: 300px;
    }
    .item {
        /* table-cell 要素として表示する. */
        display: table-cell;

        /* 上下中央に表示. */
        vertical-align: middle;

        /* 左右中央に表示. */
        text-align: center;
    }
</style>

(表示例)

(サポートブラウザ)

IE11	Edge	Chrome	Safari	Firefox
○	○	○	○	○

あまり使う機会はありませんが、htmlからPDF生成をするためのツール（phpwkhtmltopdf（Laravelなどで利用）、wicked_pdf（Railsで利用））では、Flexboxがサポートされていないので、上記の方法で上下中央表示を実現することがあります。

最後に

今回紹介した5つのいずれかが、ご覧いただいた方の要件に合う方法であることを祈っています。このようなノウハウはこれからもどんどんと執筆したいと思います。

最後になりますが本ブログでは、フロントエンド、サーバー、PHP、Python、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！