画像やテキストを縦横中央に配置する方法4つ

要素をブロックの縦横中央に配置するというシーンはたくさんあります。

横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。

そこで今回は「画像やテキストを縦横中央に配置する方法4つ」を確認していきます。

Contents

HTML
vertical-align: middle
- CSS
position:absolute + transform
- CSS
display:flex
- CSS
top,bottom,left,right,width,heightがauto以外 + margin:auto
- 参考
まとめ

HTML

ベースとなる共通HTMLです。

<div class="box">
    <div class="inner">
        <div class="content">
            <h2 class="title">title</h2>
            <p class="text">
                content here
            </p>
        </div><!--content-->
    </div><!--inner-->
</div><!--box-->

「box」の中にある「inner」もしくは「content」をCSSで縦横中央に配置していきます。

vertical-align: middle

CSS

.box{
    background: #ed4343;
    display: table;
    height: 400px;
    text-align: center;
    width: 100%;
}
.inner{
    display: table-cell;
    vertical-align: middle;
}
.content{
    border: 1px solid #fff;
    display: inline-block;
    padding: 20px;
}

10行目　「vertical-align: middle;」が適用されるには「インライン要素」か「display:table-cell;」のどちらかである必要があります。

2行目　さらに「display:table-cell;」の場合は、親要素に「display: table;」が指定されている必要があります。

position:absolute + transform

CSS

.box{
    background: #ffb21d;
    height: 400px;
    position: relative;
    text-align: center;
}
.inner{
    left: 50%;
    position: absolute;
    top: 50%;
}
.content{
    border: 1px solid #fff;
    padding: 20px;
    transform: translate(-50%,-50%);
}

7,8,9行目　「inner」に「position: absolute;」を指定して、親要素の上からと左からそれぞれ50%(半分)の位置に移動します。

15行目　「inner」の中の「content」を「transform: translate(-50%,-50%);」を指定して要素の幅と高さの50％（半分）マイナス方向に移動（変形）させています。

display:flex

CSS

.box{
    background: #42c97e;
    height: 400px;
    position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
     
}

4つの方法の中で一番シンプルで簡単な方法です。縦横中央にしたい要素の親要素に「display: flex;」と「align-items: center;」を指定するだけでできてしまいます。子要素に幅も高さも指定する必要もありません。

「display: flex;」は比較的新しいプロパティーなので、各ブラウザの対応状況は確認した上で使用するのがベストです。

flexboxの詳しい記事を書きました。

top,bottom,left,right,width,heightがauto以外 + margin:auto

.box{
    background: #489be1;
    height: 400px;
    position: relative;
    text-align: center;
}
.content{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 140px;
    margin: auto;
    border: 1px solid #fff;
    padding: 20px;
}

この方法が適用されるには下記の条件があります。