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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターやってます 👆

左右で中央揃えする方法

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

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(値1, 値2)で%指定をした場合、値 1 は横幅が基準、値 2 は高さが基準になります。

position でtop: 0;とleft: 50%;にするだけでは、上の画像のようになります。ここから自身の横幅の 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の下まで引き伸ばされます。回避するには、.boxにalign-items: flex-start;を追加すれば良いです。

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

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

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

上下で中央揃えする方法

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

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 で配置してから、自身の幅と高さの 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 番効率的な方法です。

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

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

独学に限界を感じていませんか？