もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

なぜか、ブラウザーで思い通りのレイアウトにレンダリングできないことがよくあります。コードを細かく分析してもバグが見つからない。justify-content: center;はよく使うプロパティですが、見落としがちな効かない原因があります。でも、justify-content: center;が効かない原因は、ほぼ構造的な条件不足です。

プロパティ自体が壊れているケースは稀で、前提条件を満たしていないことがほとんどです。
ここでは、justify-content: center;が効かない原因について解説します。

justify-content: center;の前提条件

justify-contentは FlexboxまたはGrid コンテナ にのみ有効です。

.container {
  display: flex;   /* または grid */
  justify-content: center;
}

よくある原因

① display が指定されていない

.container {
  justify-content: center; /* 無効 */
}

display: flex;もしくはdisplay: grid;が必要。

② 親要素に指定していない

justify-contentは コンテナ側のプロパティ です。子要素に指定しても意味がありません。親要素に指定しましょう。

.container {
display: flex;
}
.child {
  justify-content: center; /* 無効 */
}

③ 中央にしたい方向を間違えている

Flexbox特有の事項ですが、Flexboxでは

• justify-content → 主軸方向
• align-items → 交差軸方向

例

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向に中央 */
}

flex-direction: column;の場合、主軸は縦になります。

④ 要素の幅が100%で余白がない

余白が存在しないので中央に寄る余地がない。

.child {
  width: 100%;
}

⑤ Gridで使っている場合の誤解

Gridでは

• justify-content /* グリッド全体の位置 */
• justify-items /* 各アイテムの位置 */

例

.container {
  display: grid;
  justify-content: center; /* グリッド全体を中央に */
}

子要素を中央にしたいなら

place-items: center;

⑥ margin auto と混同

横方向だけ中央にしたい場合は

.child {
  margin: 0 auto;
}

Flexを使わなくても可能。

⑦ position:absolute を使っている

絶対配置された要素には効きません。

典型的な失敗例

.container {
  display: flex;
}

.child {
  width: 100%;
  justify-content: center; /* ← 無効 */
}

正しくは

.container {
  display: flex;
  justify-content: center;
}

まとめ

justify-content: center;が効かない理由は、プロパティの問題ではなく、構造の問題であることがほとんどです。次のことをチェックして解決してください。

• レイアウトコンテキスト不足
• 主軸の誤認
• 余白不足
• 指定対象の誤り