ブラウザの垂直方向と水平方向のセンタリングを実装するための CSS コードeffect_html/css

ブラウザの垂直方向と水平方向のセンタリングを実装するための CSS コードeffect_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:28:42

オリジナル

1187 人が閲覧しました

ブラウザの垂直方向と水平方向のセンタリング効果を実現するための 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/