Ako umiestniť div v absolútnom strede stránky? - javascript, jquery, css

Tu je návod, ako to robím a funguje to:

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

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

Problém je však vtedy, keď prejdem na stránku,div sa už neobjaví v strede, pretože je umiestnený 50% z hornej strany vzhľadom na pôvodnú výšku portu na zobrazenie, nie na aktuálnu. Myslím, že by som musel počúvať udalosť posúvania dokumentov a dynamicky aktualizovať polohu divu. Máte predstavu, ako to urobiť?

V podstate efekt, ktorý nasledujem, je, že div bude vždy v strede, aj keď sa používateľ posúva.

alebo možno existuje dokonca čisté riešenie CSS?

odpovede:

použitie position: fixed; namiesto position: absolute; Poloha (horná, ľavá atď.) Zostane rovnaká, ale vo vzťahu k oknu a nie k dokumentu.

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

Budeš chcieť position: fixed;.

Ak chcete dosiahnuť div v strede obrazovky, budete chcieť left: 50%; margin-left: -50px;

Všimnite si, že záporný okraj vľavo je polovica šírky kontajnera

#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}

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

Potom pre váš HTML:

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

Povedz mi, či to funguje.