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

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

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

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

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

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;
}

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

  1. position: absoluteが指定されている
  2. top,bottom,left,right全てauto以外が指定されている
  3. width,heightもauto以外が指定されている
  4. marginにautoが指定されている

2の条件は、「top,bottom」と「left,right」の相対する方向が同じ数値であれば「0」でなくても中央揃えになります。

この方法は正直なところ知りませんでした。詳しく確認したい方は下記の参考サイトに詳細が記載されています。

参考

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

以前「コピペでOK!画像や動画を全画面にフィットさせて中央に表示する」と「ボックスの高さをブラウザの高さに合わせるテク3つ!」という記事を書きましたが、その中のサンプルサイトでは「position:absolute + transform」で縦横中央に配置しています。

まとめ

私的には「display:flex」の方法がスタンダードになって欲しいなぁと思います。簡単なので!

ちなみに「position:absolute + transform」の方法はwordpressのメディアライブラリのサムネイルにも指定されていて、CSSを確認して知りました。「display:flex」を使う前はひたすらこれでやっていました。

コードは「いかにシンプルに簡潔に」できるかが重要です。色々な方法を知り、引き出しを増やし、最適な方法を選択できるようにしましょう。

Category&Tag