絶対に配置された 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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
