Centra un 'div' al centro dello schermo, anche quando la pagina viene fatta scorrere verso l'alto o verso il basso?


126

Nella mia pagina ho un pulsante che, quando cliccato, mostra uno div(stile pop-up) al centro del mio schermo.

Sto usando il seguente CSS per centrare divil centro dello schermo:

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

Questo CSS funziona bene fino a quando la pagina non viene fatta scorrere verso il basso.

Ma, se posiziono il pulsante in fondo alla mia pagina, quando viene cliccato, divviene visualizzato in alto e l'utente deve scorrere verso l'alto per visualizzare il contenuto di div.

Vorrei sapere come visualizzare il divcentro dello schermo, anche quando la pagina è stata fatta scorrere.


domanda domanda. Perché stai sottraendo margin-top: (200) e margin-left. Sento che questo è il mezzo dell'altezza e della larghezza, ma perché dobbiamo farlo per ottenere il centro assoluto? Il 50% sinistro e il 50% superiore non dovrebbero fare il trucco?
jmoon90

@ jmoon90 left: 50%; top: 50%Sposta l' angolo in alto a sinistra del .PopupPanelcentro dello schermo. Lo spostiamo quindi metà della larghezza e dell'altezza al centro, al centro. Vedi Centering su css-tricks.com
kub1x

Risposte:


189

Cambia l' positionattributo in fixedinvece di absolute.


2
Che dire se è necessario scorrere il div pop-up ed è più grande dello schermo?
Darcbar,

Tieni presente che questa non è la soluzione più reattiva (ma una soluzione perfetta per il problema sopra). Controlla getbootstrap.com/javascript/#modals e guarda con il tuo DevTools per avere delle belle idee su come lavorare con i tuoi popup / modali.
Cas Bloem,


17

Citazione : Vorrei sapere come visualizzare il div al centro dello schermo, se l'utente ha fatto scorrere verso l'alto / il basso.

Modificare

position: absolute;

Per

position: fixed;

Specifiche W3C per position: absolutee per position: fixed.


6

Ho appena trovato un nuovo trucco per centrare una scatola al centro dello schermo anche se non hai dimensioni fisse. Diciamo che vorresti una scatola 60% larghezza / 60% altezza. Il modo per renderlo centrato è creando 2 caselle: una casella "contenitore" che posiziona a sinistra: 50% superiore: 50% e una casella "testo" all'interno con la posizione inversa a sinistra: -50%; in alto: -50%;

Funziona ed è compatibile con più browser.

Dai un'occhiata al codice qui sotto, probabilmente otterrai una spiegazione migliore:

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});
html, body {
  min-height: 100%;
}

#message {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#message .container {
  height: 60%;
  left: 50%;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 60%;
}

#message .container .text {
  background: #fff;
  height: 100%;
  left: -50%;
  position: absolute;
  top: -50%;
  width: 100%;
}

#message .bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
  <div class="container">
    <div class="text">
      <h2>Warning</h2>
      <p>The message</p>
      <p class="close"><a href="#">Close Window</a></p>
    </div>
  </div>
  <div class="bg"></div>
</div>


4

Il metodo corretto è

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.