W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:mDTuuV さんの質問

目からウロコなCSSの使い方など有れば教えて下さい。
個人的には、

position:absoltute;
top:50%;
transform:translateY(-50%);

で上下中央揃えが少し感激しました。
左右揃えにも使えるし、可変しても効果あるので。

みんなの回答 3 件

ID:oG9eN3 さんの回答

transformってIE8はつかえないですか?

ID:mDTuuV

9はベンダープリフィックスが必要で、8以下は無理です。8以下はレスポンシブとかしないので、固定値で別途設定してます。

ID:i47HEg さんの回答

上下中央揃いで鱗なのはこれだったな。
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 任意の値
height: 任意の値
}

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

http://c-brains.jp/blog/wsg/14/08/06-100100.php
ID:i47HEg

IE8からOKらしい。

ID:mDTuuV

なるほど。
topとbottomとかって競合しないんですね。
保守性はちょっと悪そうだけど、ファンシーボックス的なのに使えそうですね。

ID:o90yL7 さんの回答

天地中央系で目がうろこだったのは
下記ページの5番目で説明しているabsoluteとtop、left、right、bottomを0に指定する方法ですね。

CSSでの天地中央配置について | dmlog

http://dmlog.website-labo.com/2014/04/central-arrangement/
最終更新日:2014-08-31 (5,909 views)

関連するトピックス

ページ上部に戻る