ホームページ > 記事 > ウェブフロントエンド > 絶対位置の div を水平方向と垂直方向に中央揃えにする方法_html/css_WEB-ITnose
絶対位置の div を水平方向と垂直方向に中央揃えにする方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:221459ブラウズ
絶対に配置された div を垂直方向に中央揃えにする方法:
提案: 可能な限りコードを手書きすると、学習の効率と深さが効果的に向上します。
ある時点で、絶対に配置された div を親オブジェクトの中央に垂直に配置する必要がある場合があります。使用頻度はそれほど高くないかもしれませんが、この関数の実装方法を簡単に紹介します。 。通常の状況では、要素に margin:0px auto を追加して、要素を親要素の水平方向の中央に配置し、垂直方向の中央揃えに設定できます。ただし、絶対配置オブジェクトに margin:0px auto を追加しても効果がないため、引き続き古い方法を使用する必要があります。
コード例は次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title> <style type="text/css"> .father{ width:600px; height:600px; background-color:green; margin:0px auto; position:relative; } .children{ position:absolute; width:200px; height:200px; left:200px; top:200px; background-color:red; } </style> </head> <body> <div class="father"> <div class="children"></div> </div> </body> </html> 上記のコードは、子 div を親 div の中央に水平方向および垂直方向に配置できます。いくつかの重要な点があります:
1. 親要素は相対位置を使用します。子要素は変位参照オブジェクトとして機能します。詳細については、CSS の絶対配置を参照してください。
2. 上の属性値の計算方法は、親要素の高さ/2-子要素の高さ/2、左の属性値の計算方法は、親要素の幅の値/です。 2 - 子要素の幅の値/2。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=6952
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。