margin: 0 auto; で中央寄せできない！position: absolute; を使ってないか

30DAYSトライアルのDAY13〜で作成したLPをもとに、実際の企業のLPを作ってみようと思ったら、

という事象にぶちあたって苦労したので、解決方法を残しておきます。

そもそも「margin: 0 auto;」とは

「margin: 0 auto;」は、ブロック要素を中央寄せするコードです。

ブロック要素（divとか）に幅を指定して「margin: 0 auto;」にすれば、その要素は中央寄せになる。

という時は、

• 幅を指定しているか
• ブロック要素に対して指定しているか

これらの条件をクリアすれば中央寄せになるはずです。

See the Pen
margin0auto by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.

上記のCSSでは、

• width: 60%; → 幅を指定
• margin: 0 auto; → div（ブロック要素）の中央寄せ

となります。

下記の2行は、「中央寄せ」を視覚的にわかりやすくするためだけに書いているので、今回のテーマには直接的に関係はありません。

• text-align: center; → テキストの中央寄せ
• background: yellow; → 要素の幅を見える化

「margin: 0 auto;」が効かない原因は？

「margin :0 auto;」の使い方を踏まえて、下記のコードで中央寄せにならないのは何故でしょう？

See the Pen
absolute by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.

widthで幅は指定しているし、divはブロック要素なのに中央寄せになっていません。

あからさまに怪しい「position: absolute;」をコメントアウトしてみます。

See the Pen
absolute_out by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.

中央寄せになりました！

「position: absolute;」が「margin: 0 auto;」を無効化していると見て間違いなさそうです…。

「position: absolute;」とは

「position: absolute;」は、要素の位置を【親要素を基準とした絶対値】で指定できるコードです。

サルワカさんの記事で、イラストを混じえてめっちゃわかりやすく解説されているので、詳細はそちらでご確認いただければと。

で、さきほどのCSSは、「親要素を基準にして、上から30％の位置に配置」とだけ指定して、横位置に関しては何も指定していません。

このため、

• 上から30%
• 左寄せ（初期値）

に固定されてしまい、「margin: 0 auto;」で中央寄せにすることができなかったのですね。

では、「position: absolute;」を使いつつ中央寄せにするにはどうすればいいのでしょうか。

「position: absolute;」で中央寄せにする方法は？

「position: absolute;」を使いつつ中央寄せにする方法は下記の通り。

See the Pen
absolute_center by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.

• left : 0;
• right: 0;

を追加して、

• margin: 0 auto; → margin: auto;

に変更しています。

※設定だけを覚えてしまうのもアリですが、「なぜそうするのか？」という根拠はWWW WATCHさんのサイトで詳細に解説されています。

ちょっと難しい内容ですが、納得して覚えたい派の人は読んでおいて損はないと思いますので、この機会にぜひ。