Come posizionare un div al centro dello schermo quando la pagina è più grande dello schermo

141

Ciao, sto usando qualcosa di simile al seguente per ottenere un div posizionato al centro dello schermo:

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

Tuttavia, il problema è che posiziona l'elemento al centro della pagina e non lo schermo. Quindi se la pagina è alta qualche schermata e io sono nella parte superiore della pagina (la parte superiore della parte viene visualizzata sullo schermo) quando faccio apparire il div non è nemmeno sullo schermo. Devi scorrere verso il basso per vederlo.

Qualcuno può dirmi come lo faresti apparire al centro dello schermo?

— Coder 2
fonte

Ho appena testato quel codice esatto su una pagina di test e ha centrato perfettamente il div sulla pagina, anche con circa 100 <br />prima di provare a spingerlo verso il basso. Forse prova a controllare il resto del codice per vedere se hai qualcosa che sta sovrascrivendo i valori del DIV o che sta influenzando il DIV per causare questi problemi.

— Eli,

269

aggiungi position:fixede lo manterrà in vista anche se scorri verso il basso. vederlo su 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
fonte

1

Stai salvando la vita .. La soluzione semplice funziona bene anche se l'elemento ha applicato la scala di trasformazione ..

— Vinnie,

91

Penso che questa sia una soluzione semplice:

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

Espandi frammento

— user2684935
fonte

7

questo approccio è molto più efficace della risposta approvata

— Viacheslav Dobromyslov,

2

mi è piaciuto molto, ma funziona nel browser "più vecchio"?

— Berna Mariano,

14

Usa trasforma;

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

Soluzione 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
fonte

5

Metti solo 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

Prova questo.

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

— Chandan Sharma
fonte

1

Penso che questo sia più utile perché non è necessario applicare alcuno stile all'elemento genitore.

— canbax

3

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

Questo ha funzionato per me

— Abramo
fonte

2

Anche se questo può tecnicamente essere corretto, vuoi includere una breve descrizione del perché questo risolve il problema per il contesto

— drneel

2

Risposta breve, basta aggiungere position:fixede questo risolverà il tuo problema

— Parth
fonte

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
fonte

La domanda mi è stata posta nell'intervista "come si allinea il centro div dello schermo?"

— Maitrey Malve,

1

Bene, di seguito è riportato l'esempio funzionante per questo.

Questo gestirà la posizione centrale se ridimensionate la pagina Web o caricate in formato anisize.

<!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>

Espandi frammento

In sopra il caricamento del campione div sarà sempre al centro.

Spero che questo ti possa aiutare :)

— Vikash Pandey
fonte

1

Due modi per posizionare un tag al centro dello schermo o il suo tag principale:

Usando le posizioni:

Impostare il tag parent positionsu relative(se il tag target ha un tag parent) e quindi impostare lo stile del tag target in questo modo:

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

Utilizzando flex:

Lo stile del tag principale dovrebbe essere simile al seguente:

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

— Alex Jolig
fonte

0

Nella tua pagina di script ...

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

Usa una classe media nel Div ...

   <div class="a-middle">

— Antony Jack
fonte

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

Espandi frammento

— Lăng Minh
fonte

-1

USANDO FLEX

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

— ASIR THERANS RAJA M
fonte

Questo centra il contenuto sull'elemento o sulla pagina padre, non sullo schermo.

— Sean,

-2

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

— Lukash
fonte

Aggiungi una spiegazione

— Pankaj Makwana,

-4

Per questo dovresti rilevare le dimensioni dello schermo. Ciò non è possibile con CSS o HTML; hai bisogno di JavaScript. Ecco la voce del Centro per sviluppatori Mozilla sulle proprietà della finestra https://developer.mozilla.org/en/DOM/window#Properties

Rileva l'altezza e la posizione disponibili di conseguenza.

— Scott Radcliff
fonte