ホームページ > 記事 > ウェブフロントエンド > ブラウザの垂直方向と水平方向のセンタリングを実装するための CSS コードeffect_html/css_WEB-ITnose
ブラウザの垂直方向と水平方向のセンタリングを実装するための CSS コードeffect_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:421126ブラウズ
ブラウザの垂直方向と水平方向のセンタリング効果を実現するための css コード:
センタリングが比較的美しいためか、Web ページの中央にいくつかのポップアップ ウィンドウや機能モジュールが表示されます css の使い方を紹介します。 div を実現する 垂直方向と水平方向のセンタリングの効果を実現するには、コードは次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#antzone{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -150px; width:300px; height:200px; z-index:99; background:green;} </style></head><body><div id="antzone"></div></body></html> 上記のコードは、div の垂直方向と水平方向のセンタリングの効果を実現します。その原理を以下に簡単に紹介します。
実装原理:
まず div を絶対位置に設定し、次にその上と左の値をそれぞれ 50% に設定します。ただし、これでは div の中心点の垂直方向と水平方向のセンタリング効果は得られません。ただし、div の左上隅の Centered の垂直方向と水平方向のセンタリング効果が得られるため、外側のマージンを使用して上マージンと左マージンを負の数に設定する必要があり、サイズはそれぞれ高さと幅の半分になります。 、中心点のセンタリング効果を達成するために。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15400
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。