HTML&CSS

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

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

「margin: 0 auto;」で中央寄せができない!!

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

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

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

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

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;

に変更しています。

「position: absolute;」を使いつつ中央寄せにしたい時は、
     left : 0;
     right: 0;
     margin: auto;
に設定!
※widthの指定も忘れずに

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

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