ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV 垂直センタリング効果を実現する純粋な CSS (すべてのブラウザで有効)_html/css_WEB-ITnose
DIV 垂直センタリング効果を実現する純粋な CSS (すべてのブラウザで有効)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:27:43957ブラウズ
最近、会社のユーザー ログイン ページが変更され、ログイン ボックスをページの水平方向と垂直方向の中央に配置する必要がありました。知識が限られていたため、知恵を絞って絶対位置 + パーセント位置マイナスを使用することを考えました。垂直方向と水平方向のセンタリングを実現するためのコードは次のとおりです。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 .test{ 9 position:absolute;10 width:200px;11 height:200px;12 background:#999;13 top:50%;14 left:50%;15 margin-top:-100px;16 margin-left:-100px;17 </style>18 </head>19 20 <body>21 22 <div class="test"></div>23 </body>24 </html> テスト後、Google、IE8、IE6、Firefox、および 360 で有効です (他のブラウザーは言うまでもありません)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。