これが「私のやり方」で、うまくいきます。
#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>
それが動作するかどうか教えてください。