ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose を使用して全画面で div を水平方向と垂直方向に中央揃えにする方法
css_html/css_WEB-ITnose を使用して全画面で div を水平方向と垂直方向に中央揃えにする方法
- WBOYオリジナル
- 2016-06-24 11:29:421301ブラウズ
CSS を使用して全画面で div を水平方向および垂直方向に中央揃えする方法:
この章では、Web ページ全体で div 要素を水平方向および垂直方向に中央揃えにする方法を紹介します。コードを見てください。
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title><style type="text/css"> body{ margin:0px; padding:0px; } #thediv{ width:100px; height:100px; background:green; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}</style> </head> <body> <div id="thediv"></div></body> </html> 上記のコードは、Web ページ上で div の全画面中央揃え効果を実現します。ここでは、その実装プロセスを簡単に紹介します。
1. 実装原則:
div 要素を絶対配置に設定し、その左と右の属性値をそれぞれ 50% に設定します。このとき、div は中央に配置されません。 div なので、まだ高さと幅の半分である一定の距離だけ上と左に引き上げる必要があります。
2. 関連資料:
1. 絶対配置 CSS の絶対配置に関する章。
2. 負のマージン値については、CSS margin-right 属性の章を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=14084
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。