ど素人から毛を生やす。<延>

ブロック要素を上下左右中央に置きたい

Web > css 2014年3月11日(最終更新:3年前)

このページは2014.3.11に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
今日の帰りはゲーム屋に寄って、安く売ってたら見つからないゲームを買い直そうと決めた餅。です。

まぁあくまで安売りしてたらですが…安いといいなぁ。

さて、本日は久しぶりにCSSの話題。

ブロック要素を上下左右の中央に置きたい。
よくある話…ではないですが、カップラーメンを無性に食べたくなるくらいの頻度でやりたくなることだと思います。

んで、最も一般的な方法はネガティブマージンを使う技なのですが…

左右はmargin:autoでおk。上下は要素をposition:absoluteにしてtop:50%、margin-top:-[コンテンツ高さ]にします。親要素にはposition:relativeを忘れずに。

シンプルで良いのですが、コンテンツの高さが明確でない場合には使えないのは問題です。

今回はこのやり方だと都合が悪かったので、display:table-cellを使うやり方をしてみました。

が、今までこちらの方法をよく理解してなかったので改めて。

h260311_2

ネガティブマージンを使うときと比べると、入れ子がひとつ多くなるのが注意点ですかね。

まずは親要素をdisplay:tableにします。

次に子要素をdisplay:table-cellにし、vertial-align:middleに。
これで要素の上下方向の中央揃えが完了です。

が、ここまでだと上下方向だけなので、更にdisplay:inline-blockの孫要素を入れて子要素をtext-align:centerに。
これで上下左右の中央揃えが完了です。

ちなみに、孫要素をblockにし、margin:autoでも正常に表示されました。
table要素の中のblock要素っていうのが記述的におkなのかわからなかったので、安全策を取って今回はinline-block要素に。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)