模写修行メディア

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

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

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

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

注意!

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

👇 メンターやってます 👇

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

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

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

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

左右で中央揃えする方法

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

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

【初学者・中級者の方】独学に限界を感じてませんか?

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

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

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

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービス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と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 番効率的な方法です。

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

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

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

現役エンジニアによるメンタリングサービス作りました!

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

👇 こんな方のためのサービスです。

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

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材