Voglio centrare un div
in verticale con i CSS. Non voglio tabelle o JavaScript, ma solo puro CSS. Ho trovato alcune soluzioni, ma tutte mancano del supporto di Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Come posso centrare un div
verticalmente in tutti i principali browser, incluso Internet Explorer 6?
Di seguito è la migliore soluzione completa che ho potuto costruire per centrare verticalmente e orizzontalmente una casella di contenuto a larghezza fissa, altezza flessibile. È stata testata e funziona per le versioni recenti di Firefox, Opera, Chrome e Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Visualizza un esempio funzionante con contenuto dinamico
Ho costruito alcuni contenuti dinamici per testare la flessibilità e mi piacerebbe sapere se qualcuno vede qualche problema con questo. Dovrebbe funzionare bene anche per le sovrapposizioni centrate -- lightbox, pop-up, ecc.
In realtà avete bisogno di due div per la centratura verticale. Il div che contiene il contenuto deve avere una larghezza e un'altezza.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Ecco il [risultato][1]
Sfortunatamente - ma non sorprendentemente - la soluzione è più complicata di quanto si vorrebbe che fosse. Inoltre, sfortunatamente, avrete bisogno di usare div aggiuntivi intorno al div che volete centrato verticalmente.
Per i browser conformi agli standard come Mozilla, Opera, Safari, ecc. è necessario impostare il div esterno per essere visualizzato come table e il div interno per essere visualizzato come table-cell - che può quindi essere centrato verticalmente. Per Internet Explorer, è necessario posizionare il div interno assolutamente all'interno del div esterno e poi specificare il top come 50%. Le pagine seguenti spiegano bene questa tecnica e forniscono anche alcuni esempi di codice:
C'è anche una tecnica per fare il centraggio verticale usando JavaScript. Allineamento verticale del contenuto con JavaScript & CSS lo dimostra.