ホームページ > 記事 > ウェブフロントエンド > Organize_html/css_WEB-ITnose への CSS 垂直中央揃え方法
Organize_html/css_WEB-ITnose への CSS 垂直中央揃え方法
- WBOYオリジナル
- 2016-06-24 11:52:261447ブラウズ
垂直方向のセンタリングは、オーバーレイ上のポップアップ ボックスなどの 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 の移動オフセットのパーセンテージ値は、最初の方法と同様に、自身のサイズに相対的です。 。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。