[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ

[momijitan]

天地中央寄せ

[canna_koritan]

“transform: translateY(-50%);”

[tokumita]

コンテンツを上下左右の中央に配置する方法

[kiyokichi]

display:flex使うときは中身が1点のとき。

[csslecture]

css,高さ

[Rishatang]

table-cellとinline-blockの複合技じゃだめなの？IE8から対応できるけど

[hedeyoshi]

イラストの女の子が黒ストッキングだったらおじさんうれしかったんだけどな。黒ストッキング。黒ストッキング。黒ストッキング。黒ストッキング。黒ストッキング。黒ストッキング。黒ストッキング。黒ストッキング。

[nappai1]

いつも忘れる

[cheep-int]

忘れてた

[mandarin1157]

ホームページCSSのサイト

[kewpiedesign]

毎回忘れる

[bxyxvzz]

なんでこれにブクマがたくさんついてるのだ

[otchy210]

半年ごとにまとめられるやつ。最近は top,left + transform で安定してる気がする。

[hidesuke]

これな！　いつも忘れてめっちゃググるねん！

[nffsjj]

そんなIE11時代、そして万が一のIE9を考慮した中央配置テクニックを紹介します。

[laconic]

transform

[hachi09]

“2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。”

[masayoshinym]

”高さが分からない要素を天地・左右・天地左右の中央に配置”

[tetsugrande]

あ、高さ決まってない時はtransform使うのか。 ようやく実際に案件に使えるようになってきたなー。

[yanagikouta]

これは重宝しそう