BLOG

CSSの中央寄せが効かない原因7選

2026.06.28 BLOG

CSSで中央寄せをしたいだけなのに、上下だけ効かない、横だけ効く、absoluteでズレる、というケースはかなり多いです。中央寄せは指定そのものよりも、「何を、どの親要素の中で、どの方向に揃えるか」が重要です。

この記事では、CSSの中央寄せが効かない原因を7つに分けて、Grid、Flexbox、absolute、テキスト、ブロック要素の使い分けまで整理します。

まず結論：中央寄せの使い分け

display: grid; place-items: center;：1要素を上下左右中央に置く
display: flex; justify-content: center; align-items: center;：横並びや複数要素も扱う
position: absolute; inset/transform：重ねるUIや装飾向き
margin-inline: auto：幅を持つブロック要素の横中央
text-align: center：テキストやinline要素の横中央

<main class="center-demo">
  <section class="case case--grid">
    <div class="target">Grid</div>
  </section>

  <section class="case case--flex">
    <div class="target">Flex</div>
  </section>

  <section class="case case--absolute">
    <div class="target">Absolute</div>
  </section>
</main>

.case {
  width: 280px;
  min-height: 180px;
  border: 2px solid #111;
}

.target {
  width: 90px;
  padding: 14px;
  background: #ff2f63;
  color: #fff;
  text-align: center;
}

.center-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.case {
  min-height: 180px;
  border: 2px solid #111;
  background: #fff;
}

.case--grid {
  display: grid;
  place-items: center;
}

.case--flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.case--absolute {
  position: relative;
}

.case--absolute .target {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.target {
  width: 90px;
  padding: 14px;
  background: #ff2f63;
  color: #fff;
  text-align: center;
}

原因1：親要素に高さがない

上下中央寄せは、親要素に高さがないと成立しません。align-items: centerやplace-items: centerを書いても、親の高さが中身と同じなら動いていないように見えます。

.box {
  min-height: 240px;
  display: grid;
  place-items: center;
}

原因2：text-align:centerでブロック要素を中央寄せしようとしている

text-align: centerは、テキストやinline要素を横方向に揃える指定です。幅を持つブロック要素を中央に置くなら、margin-inline: autoを使います。

原因3：margin:autoを使う要素に幅がない

margin-inline: autoは、余った左右の余白を自動で分配する指定です。対象要素の幅がautoのままだと、親幅いっぱいに広がって中央寄せに見えません。

.panel {
  width: min(100%, 640px);
  margin-inline: auto;
}

原因4：Flexboxの主軸と交差軸を逆に見ている

Flexboxではjustify-contentが主軸、align-itemsが交差軸です。flex-direction: columnにすると軸が変わるため、効かないのではなく指定方向が変わっています。

原因5：absoluteの基準になる親がない

position: absoluteで中央寄せする場合、親にposition: relativeが必要です。詳しくは関連記事の「position:absoluteが効かない原因6選」にもつなげられます。

原因6：transformなしでleft/top:50%だけ指定している

left: 50%とtop: 50%は、要素の左上を中央に置く指定です。要素そのものの中心を合わせるには、transform: translate(-50%, -50%)を組み合わせます。

原因7：画像やiframeの初期表示に引っ張られている

画像やiframeはサイズやinlineの隙間でズレて見えることがあります。中央寄せ以前に、display: block、max-width: 100%、aspect-ratioを整えてから配置を確認します。

内部リンク

中央寄せで詰まった場合は、原因別に以下も確認してください。

CodePen

CodePenでは、上のindex.htmlをHTMLパネルへ、bad.cssとgood.cssをCSSパネルへ貼り替えてください。Grid、Flexbox、absoluteの違いを同じ画面で確認できます。

まとめ

中央寄せが効かないときは、親の高さ、対象要素の種類、Flexboxの軸、absoluteの基準、transformの有無を順番に確認します。迷ったら、単体要素はGrid、複数要素はFlexbox、重ねるUIはabsoluteで考えると切り分けやすいです。

参考資料

STEP BACK