模写修行メディア

CSSで中央揃えする方法まとめ!これさえ覚えればOK!

CSSで中央揃えする方法まとめ!これさえ覚えればOK!

この記事をシェア:

  • テキストを中央揃えにしたい
  • 要素を中央揃えにしたい

このような機会はとても多いです。この記事では、CSSで上下・左右・上下左右で中央揃えする方法を紹介します。

記事内で使っているcodepenは、コードの変更ができるようになっています。変更してどんな見た目になるか試してみてください。

注意!
古い方法 / あまり推奨できない方法 / 非効率な方法は紹介しません。覚えるべきものに絞って紹介しています。

左右で中央揃えする方法

左右で中央揃えする方法を紹介します。

text-alignでテキストを左右中央揃えにする

<p class="text">親譲りの無鉄砲で小供の時から損ばかりしている。</p>
.text { text-align: center; }
  • pタグにdisplay: inline-block;display: inline;の指定がない
  • aタグやspanタグのようにデフォルトでdisplay: inline;になっている要素ではない

これらの条件で、左右中央揃えになります。


<div class="text02">
    <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p>
</div>
.text02 { text-align: center; }

親要素に指定しても、左右中央揃えになります。

  • pタグにdisplay: inline-block;display: inline;の指定がある
  • aタグやspanタグのようにデフォルトでdisplay: inline;になっている要素

これらの場合でも、左右中央揃えになります。

margin: 0 auto;で要素を左右中央揃えにする

.box { ... }
.box-item{
    ...
     /* 👇 Point */
    margin: 0 auto;
}

かなり使う方法です。

  • box-itemにdisplay: inline-block;display: inline;の指定がない
  • box-itemがaタグやspanタグのようにデフォルトでdisplay: inline;になっている要素ではない

これらの条件で、左右中央揃えになります。


.box {
    ...
    text-align: center; /* 👈 追加 */
}

.box-item{
    ...
    /* margin: 0 auto; */
    display: inline-block; /* 👈 追加 */
}

marginを使った方法ではなくなってしまいますが、box-itemがdisplay: inline-block;display: inline;でも、上のようにすれば中央揃えできます。


CSSで余白を作る方法!marginとpaddingについて解説!

marginについては、上の記事で詳しく紹介しています。

positionとtransformで要素を左右中央揃えにする

.box {
    ...
    /* 👇 Point */
    position: relative;
}
.box-item{
    ...
    /* 👇 Point */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

transformプロパティを使うと、要素を回転、拡大縮小、傾斜、移動ができます。translateでは移動ができます。

translate(値1, 値2)のようにすると、要素は下のように移動します。

  • X座標(水平方向)へ値1だけ移動
  • Y座標(垂直方向)へ値2だけ移動
translateを使った時の移動の例

translate(値1, 値2)で%指定をした場合、値1は横幅が基準、値2は高さが基準になります。

positionで位置指定した時の図

positionでtop: 0;left: 50%;にするだけでは、上の画像のようになります。ここから自身の横幅の50%を左にずらさないと中央になりません。

translateで50%左にずらしたした時の図

transform: translate(-50%, 0);でX座標(水平方向)の左に50%ずらしました。前述した通り、この50%は要素の横幅が基準なので、このようにうまく中央揃えすることができます。

Flexboxで要素を左右中央揃えにする

.box {
    ...
    /* 👇 Point */
    display: flex;
    justify-content: center;
}
.box-item{ ... }

justify-content: center;で主軸(今回の場合横軸)方向で中央になります。

.box-itemの高さがautoの場合、.box-item.boxの下まで引き伸ばされます。回避するには、.boxalign-items: flex-start;を追加すれば良いです。

CSS Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり!

Flexboxの詳しい使い方は、上の記事をご覧ください。

上下で中央揃えする方法

上下で中央揃えする方法を紹介します。

positionとtransformで要素を上下中央揃えにする

.box {
    ...
    /* 👇 Point */
    position: relative;
}
.box-item{
    ...
    /* 👇 Point */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

左右中央揃えした時と考え方は同じです。

Flexboxで要素を上下中央揃えにする

.box {
    ...
    /* 👇 Point */
    display: flex;
    align-items: center;
}
.box-item{ ... }

align-items: center;でクロス軸(今回の場合縦軸)方向で中央になります。

上下左右で中央揃えする方法

上下左右で中央揃えする方法を紹介します。

positionとtransformで要素を上下左右中央揃えにする

.box {
    ...
    /* 👇 Point */
    position: relative;
}
.box-item{
    ...
    /* 👇 Point */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

上下や左右で中央揃えする時と考え方は同じです。

positionとtransformで要素を上下左右中央揃えにする

上の画像のように、positionで配置してから、自身の幅と高さの50%分ずらしています。

Flexboxで要素を上下左右中央揃えにする

.box {
    ...
    /* 👇 Point */
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-item{ ... }
  • justify-content: center;で主軸(今回の場合横軸)方向で中央になる
  • align-items: center;でクロス軸(今回の場合縦軸)方向で中央になる

これら2つがあるので、上下左右で中央揃えになります。


.box {
    ...
    /* 👇 Point */
    display: flex;
}
.box-item{
    ...
    /* 👇 Point */
    margin: auto;
}

margin: auto;を使うことでも可能です。

CSS Gridで要素を上下左右中央揃えにする

.box {
    ...
    /* 👇 Point */
    display: grid;
    place-content: center;
}
.box-item{ ... }

親要素に2行だけで済むので、1番効率的な方法ですが、IEでは使えません。

【CSS Grid入門】図解も交えて使い方を詳しく解説!

CSS Gridの詳しい使い方は、上の記事をご覧ください。

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材