模写修行メディア

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 の詳しい使い方は、上の記事をご覧ください。

コーディングの練習が出来るサービスを作りました 🎉

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

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

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

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

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

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