/ / divをページの絶対中心に配置するにはどうすればいいですか? - javascript、jquery、css

ページの絶対的な中央にdivを配置する方法は? - javascript、jquery、css

これが「私のやり方」で、うまくいきます。

#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }

<div id="myDiv"></div>

しかし、問題はページを下にスクロールしたときです。divは、現在のビューポートの高さではなく、元のビューポートの高さに対して上から50%の位置にあるため、中央に表示されなくなりました。そのため、文書のスクロールイベントを監視し、divの位置を動的に更新する必要があると思います。どのようにそれを行う方法がありますか?

基本的には、ユーザーがスクロールしてもdivが常に中央にくるようにしてください。

あるいは、純粋なcssソリューションさえありますか?

回答:

回答№1は5

つかいます position: fixed; の代わりに position: absolute; 位置(上、左など)は変わりませんが、ウィンドウとの関係ではなく、ドキュメントとの関係です。

http://jsfiddle.net/jasongennaro/25WAg/


回答№2の場合は0

あなたが欲しい」 position: fixed;.

画面中央のdivを達成するためには、「必要になるでしょう left: 50%; margin-left: -50px;

負の左マージンはコンテナの幅の半分です。


回答№3の場合は0
#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}

#container {
width: 90%;
height: 90%;
}

それからあなたのHTMLのために:

<div id="container">
<div id="myDiv">DATA</div>
</div>

それが動作するかどうか教えてください。