Cześć, używam czegoś podobnego do poniższego, aby ustawić div na środku ekranu:
<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>
Jednak problem polega na tym, że pozycja jest umieszczana na środku strony, a nie na ekranie. Więc jeśli strona ma kilka ekranów wysokości i jestem na górze strony (górna część jest wyświetlana na ekranie), kiedy sprawiam, że div jest widoczny, nie ma go nawet na ekranie. Aby go zobaczyć, musisz przewinąć w dół.
Czy ktoś może mi powiedzieć, jak sprawisz, że pojawi się na środku ekranu?
<br />
przed nim, aby spróbować go przesunąć w dół. Może spróbuj sprawdzić resztę kodu, aby zobaczyć, czy masz coś, co albo nadpisuje wartości DIV, albo wpływa na twój DIV, aby spowodować te problemy.Odpowiedzi:
po prostu dodaj,
position:fixed
a pozostanie na widoku, nawet jeśli przewiniesz w dół. zobacz na http://jsfiddle.net/XEUbc/1/źródło
Myślę, że to proste rozwiązanie:
źródło
Użyj przekształcenia;
Rozwiązanie Javascript:
źródło
Po prostu włóż
margin:auto;
źródło
Spróbuj tego.
źródło
To zadziałało dla mnie
źródło
Krótka odpowiedź, po prostu dodaj,
position:fixed
a to rozwiąże Twój problemźródło
źródło
Cóż, poniżej znajduje się działający przykład.
Spowoduje to obsługę pozycji środkowej, jeśli zmienisz rozmiar strony internetowej lub załadujesz ją w dowolnym rozmiarze.
W powyższym przykładzie ładowanie div będzie zawsze w środku.
Mam nadzieję, że to ci pomoże :)
źródło
Dwa sposoby umieszczenia tagu na środku ekranu lub jego tagu nadrzędnego:
Korzystanie z pozycji:
Ustaw tag nadrzędny
position
narelative
(jeśli tag docelowy ma tag nadrzędny), a następnie ustaw styl tagu docelowego w następujący sposób:Korzystanie z Flex:
Styl tagu nadrzędnego powinien wyglądać następująco:
źródło
Na stronie skryptu ur ...
Użyj klasy średniej w Div ...
źródło
źródło
KORZYSTANIE Z FLEX
źródło
źródło
W tym celu musiałbyś wykryć rozmiar ekranu. Nie jest to możliwe w przypadku CSS lub HTML; potrzebujesz JavaScript. Oto wpis w Mozilla Developer Center dotyczący właściwości okna https://developer.mozilla.org/en/DOM/window#Properties
Wykryj odpowiednio dostępną wysokość i pozycję.
źródło