Organize_html/css_WEB-ITnose への CSS 垂直中央揃え方法-htmlチュートリアル-php.cn

Organize_html/css_WEB-ITnose への CSS 垂直中央揃え方法

WBOY

リリース： 2016-06-24 11:52:26

オリジナル

1470 人が閲覧しました

垂直方向のセンタリングは、オーバーレイ上のポップアップボックスなどの CSS の配置でよく使用されます。

互換性の高い方法:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#box{ width:200px; height:100px; text-align:center; position: absolute;  left: 50%; top: 50%; margin-top: -50px;    /* 高度的一半 */ margin-left: -100px;    /* 宽度的一半 */ background-color:#ffff99;}</style></head><body><div id="box">Hello World!</div></body></html>

ログイン後にコピー

この方法は、補正のために負のマージンを設定する必要があるため、幅と高さが既知のブロックにのみ適用されます。
サイズが不明なブロックの場合は、次の方法を使用できます:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#box{ width:200px; height:100px; text-align:center; position: absolute;  left: 0; top: 0; right:0; bottom:0; margin:auto; background-color:#ffff99;}</style></head><body><div id="box">Hello World!</div></body></html>

ログイン後にコピー

その理由は、絶対配置レイアウトは 3 つの要素に依存するためです。1 つは要素の位置、1 つは要素のサイズです。、もう 1 つは要素のマージン値です。サイズとマージンが設定されていない要素は、位置が固定されている場合はサイズが割り当てられ、マージンはすべて適応されます。

IE7 - レンダリング方法とレンダリングルールが異なります。要素の位置を調整することはできません。

CSS3 では、新しいトリックがあります:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#box{ width:200px; height:100px; text-align:center; position: absolute;  left: 50%; top: 50%; transform: translate(-50%, -50%);  background-color:#ffff99;}</style></head><body><div id="box">Hello World!</div></body></html>

ログイン後にコピー

は、マージンの代わりにtransform を使用することです。transform の移動オフセットのパーセンテージ値は、最初の方法と同様に、自身のサイズに相対的です。。