Jak umieścić element DIV na środku ekranu, gdy strona jest większa niż ekran

141

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?

— Koder 2
źródło

Właśnie przetestowałem ten dokładny kod na stronie testowej i wyśrodkowałem element div na stronie, nawet mając około 100 <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.

— Eli

269

po prostu dodaj, position:fixeda pozostanie na widoku, nawet jeśli przewiniesz w dół. zobacz na http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    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;
}

— Hussein
źródło

1

Jesteś ratownikiem życia. Proste rozwiązanie działa dobrze, nawet jeśli element ma zastosowaną skalę transformacji.

— Vinnie

91

Myślę, że to proste rozwiązanie:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

Rozwiń fragment

— user2684935
źródło

7

takie podejście jest znacznie lepsze niż zatwierdzona odpowiedź

— Viacheslav Dobromyslov

2

kochasz ten, ale czy działa w „starszej” przeglądarce?

— BernaMariano,

14

Użyj przekształcenia;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Rozwiązanie Javascript:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— Erdogan
źródło

5

Po prostu włóż margin:auto;

#mydiv {
    margin:auto;
    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;
}

<div id="mydiv">Test Div</div>

5

Spróbuj tego.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— Chandan Sharma
źródło

1

Myślę, że ten jest bardziej przydatny, ponieważ nie musisz stosować żadnego stylu do elementu nadrzędnego.

— canbax

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

To zadziałało dla mnie

— Abraham
źródło

2

Chociaż może to być technicznie poprawne, chcesz dołączyć krótki opis, dlaczego to rozwiązuje problem w kontekście

— drneel

2

Krótka odpowiedź, po prostu dodaj, position:fixeda to rozwiąże Twój problem

— Parth
źródło

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— Maitrey Malve
źródło

Pytanie zadano mi w wywiadzie „Jak wyrównujesz środek div na ekranie?”

— Maitrey Malve

1

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.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Rozwiń fragment

W powyższym przykładzie ładowanie div będzie zawsze w środku.

Mam nadzieję, że to ci pomoże :)

— Vikash Pandey
źródło

1

Dwa sposoby umieszczenia tagu na środku ekranu lub jego tagu nadrzędnego:

Korzystanie z pozycji:

Ustaw tag nadrzędny positionna relative(jeśli tag docelowy ma tag nadrzędny), a następnie ustaw styl tagu docelowego w następujący sposób:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Korzystanie z Flex:

Styl tagu nadrzędnego powinien wyglądać następująco:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— Alex Jolig
źródło

0

Na stronie skryptu ur ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Użyj klasy średniej w Div ...

   <div class="a-middle">

— Antony Jack
źródło

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Rozwiń fragment

— Lăng Minh
źródło

-1

KORZYSTANIE Z FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
źródło

Spowoduje to wyśrodkowanie treści na elemencie lub stronie nadrzędnej, a nie na ekranie.

— Sean

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— LukASh
źródło

Dodaj trochę wyjaśnień

— Pankaj Makwana,

-4

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ę.

— Scott Radcliff
źródło