Oto jak to robię i to działa:
#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
<div id="myDiv"></div>
Ale problem polega na tym, że przewijam stronę,element div nie pojawia się już w środku, ponieważ jest umieszczony w odległości 50% od góry w stosunku do oryginalnej wysokości portu widoku, a nie aktualnej. Sądzę więc, że musiałbym słuchać zdarzenia przewijania dokumentu i dynamicznie aktualizować położenie div. Masz pomysł, jak to zrobić?
Zasadniczo efekt "po" jest dla div, aby zawsze był w centrum, nawet gdy użytkownik przewija.
A może jest nawet czyste rozwiązanie css?
Odpowiedzi:
5 dla odpowiedzi № 1Posługiwać się position: fixed; zamiast position: absolute;
Pozycjonowanie (u góry, po lewej itd.) Pozostanie takie samo, ale w odniesieniu do okna, a nie dokumentu.
http://jsfiddle.net/jasongennaro/25WAg/
0 dla odpowiedzi nr 2
Będziesz chciał position: fixed;.
Aby osiągnąć div na środku ekranu, będziesz chciał left: 50%; margin-left: -50px;
Zauważ, że ujemny margines po lewej to połowa szerokości kontenera
0 dla odpowiedzi № 3
#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}
#container {
width: 90%;
height: 90%;
}
Następnie dla Twojego HTML:
<div id="container">
<div id="myDiv">DATA</div>
</div>
Powiedz mi, czy to działa.