カテゴリー
お問い合わせ

【CSS】もう迷わない！要素を中央揃えする3つの王道メソッド

HTML/CSS
目次

Webページをコーディングしていると、「要素を親要素のど真ん中（上下左右の中央）に配置したい！」という場面に必ず遭遇します。 昔は複雑な計算が必要でしたが、モダンなCSSを使えば非常にシンプルに実装できるようになりました。

今回は、もっともよく使われる「Flexbox」を使った方法から、たった2行で完結する「CSS Grid」を使った最新の方法、そして要素を重ねる時に必須となる「position: absolute;」を使った方法まで、コピペでそのまま使えるデモと共にご紹介します！

デモ動作

See the Pen 中央揃えにする王道パターン by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>CSS 中央揃え デモ</h2>
  <p class="p-desc">3つの異なるアプローチで、要素を上下左右の中央に配置しています！</p>
  
  <div class="p-demo-box">
    
    <!-- 💡 1. Flexbox を使った中央揃え -->
    <section class="p-section">
      <h3>1. Flexbox（定番・王道）</h3>
      <div class="c-container js-center-flex">
        <div class="c-box">Flexbox</div>
      </div>
    </section>

    <!-- 💡 2. CSS Grid を使った中央揃え -->
    <section class="p-section">
      <h3>2. CSS Grid（たった2行！）</h3>
      <div class="c-container js-center-grid">
        <div class="c-box c-box--pink">Grid</div>
      </div>
    </section>

    <!-- 💡 3. position: absolute を使った中央揃え -->
    <section class="p-section">
      <h3>3. Absolute + Transform（重ね合わせに強い）</h3>
      <div class="c-container js-center-absolute">
        <div class="c-box c-box--green js-absolute-child">Absolute</div>
      </div>
    </section>

  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
  color: #3e3e3e;
}

h2 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #1bb4d4;
}

.p-desc {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
}

.p-demo-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.p-section {
  width: 100%;
  max-width: 460px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

h3 {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 18px;
  text-align: left;
  border-bottom: 2px solid #eee;
}

/* 共通の親コンテナと子要素 */
.c-container {
  width: 100%;
  height: 240px;
  background: #e0f7fa;
  border: 2px dashed #1bb4d4;
  border-radius: 8px;
}

.c-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #1bb4d4;
  border-radius: 50%;
}

.c-box--pink {
  background: #e83e8c;
}

.c-box--green {
  background: #28a745;
}

/* =========================================
   💡 1. Flexboxの指定
========================================= */
.js-center-flex {
  display: flex;
  align-items: center; /* 上下の中央揃え */
  justify-content: center; /* 左右の中央揃え */
}

/* =========================================
   💡 2. CSS Gridの指定
========================================= */
.js-center-grid {
  display: grid;
  place-content: center; /* これ1行で上下左右中央！ */
}

/* =========================================
   💡 3. Absoluteの指定
========================================= */
.js-center-absolute {
  position: relative; /* 親要素を基準位置にする */
}

.js-absolute-child {
  position: absolute;
  top: 50%; /* 上から50%の位置 */
  left: 50%; /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻す */
}

コードの解説と使い分け

【迷ったらコレ】CSS Grid（place-content: center）

/* =========================================
   💡 2. CSS Gridの指定
========================================= */
.js-center-grid {
  display: grid;
  place-content: center; /* これ1行で上下左右中央！ */
}

親要素に対して「子要素を1つだけ」ど真ん中に置きたい場合は、記述量が最も少ないGridがおすすめです！

【柔軟性No.1】Flexbox

/* =========================================
   💡 1. Flexboxの指定
========================================= */
.js-center-flex {
  display: flex;
  align-items: center; /* 上下の中央揃え */
  justify-content: center; /* 左右の中央揃え */
}

複数の要素を並べつつ全体を中央に配置したい場合や、コンテンツの量によってレイアウトを柔軟に変えたい場合はFlexboxがおすすめです！

【重ね合わせ専用】position: absolute;

/* =========================================
   💡 3. Absoluteの指定
========================================= */
.js-center-absolute {
  position: relative; /* 親要素を基準位置にする */
}

.js-absolute-child {
  position: absolute;
  top: 50%; /* 上から50%の位置 */
  left: 50%; /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻す */
}

画像の上のど真ん中に「ボタン」を重ねたり、画面全体を覆う「モーダルウィンドウ」を中央に表示したりするなど、他の要素から独立して浮かせたい時にはこの手法が必須になります。

まとめ

今回はCSSで要素を中央揃えにするための、代表的な3つの手法をご紹介しました。

「とりあえず中央に置きたい」という時は、たった2行で完結する CSS Grid が便利です。一方で、複数要素のレイアウト調整も兼ねるなら Flexbox、モーダルや画像の上にアイコンを重ねるような特殊な配置には position: absolute と、状況に合わせて使い分けるのがモダンなWeb制作の基本になります。

どの手法も頻繁に使うテクニックなので、ぜひそれぞれの特徴をマスターして、思い通りのレイアウトをサクッと組めるようになりましょう！

Prev
Next

関連記事