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

2025.12.24

内容に広告・プロモーションを含みます

URLをコピーしました！

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安そんな悩み、ありませんか？特に未経験からスタートする方にとっては…

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

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

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

この記事を書いた人

フリーランスWEBクリエイターとして10年の活動実績。WEB制作歴トータル17年。
要件定義からデザイン・コーディングまで全て担当。
Webサイト、LPの制作数、延べ100サイト以上。
個人での売上1300万円超えを機に法人化
現在は株式会社Spring DAY代表、兼クリエイティブディレクターとして現役活動中

かすがです

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の詳しい記事を書きました。

あわせて読みたい

【CSS】Flexboxのチートシート完全保存版みなさん、レイアウトが超簡単になるCSSの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;
}

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