Dato un div con dimensioni note, ad esempio width: 300px; height: 200px, qual è il metodo più semplice per posizionarlo al centro dello schermo sia verticalmente che orizzontalmente? Example hereQual è il metodo più semplice per il centraggio verticale + orizzontale di un div nella finestra?
Sono interessato all'ultima versione di Firefox (non sono necessari gli hack di IE).
CSS solo per favore, no Javascript.
posizione che il 50% dal contenitore della finestra/genitore e utilizzare un negativo dimensione del margine che è la metà degli elementi larghezza/altezza :)
position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
Potrebbe essere necessario impostare height: 100%, su sia il body e html
html, body {
height: 100%;
}
Edit: Ecco un lavoro example.
Quali metodi si è aperti all'utilizzo? Ad esempio CSS fino a che livello - 2 o 3? Javascript? jQuery? Il mio primo pensiero è che, dal momento che i div possono essere centrati orizzontalmente attraverso margin-left: auto; e margin-right: auto;, forse provare margin: auto; per tutti e 4 i lati. Fammi sapere se funziona.
CSS -2 o 3? Cosa intendi @ClarkeyBoy? – Marko
Beh, non so se c'è qualcosa di disponibile da CSS3 che potrebbe aiutare, ma se ha bisogno di lavorare in CSS2. Non mi sarei sforzato di scoprire se era così, senza sapere se poteva essere CSS3 in primo luogo. – ClarkeyBoy
Non funziona per verticale. http://jsfiddle.net/Wv2jZ/15/ – Marko
Senza supportare IE, questo è in realtà piuttosto facile da ottenere utilizzando display: table e display: table-cell.
Ecco un aggiornamento del HTML:
<div id='my_div'>
<div class="centered">this is vertically centered</div>
</div>
CSS:
body, html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#my_div
{
width: 300px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
height: 100%;
display: table;
overflow: hidden;
}
.centered
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
E per anteprima: http://jsfiddle.net/we8BE/
Solo per curiosità, perché hai 2 dichiarazioni di altezza per '# my_div'? – Marko
Ah, buona presa. Non ho visto che hai già definito un'altezza nei tuoi stili. Questo potrebbe non essere esattamente quello che stai cercando, ma una dimostrazione di come può essere fatto in un ambiente non IE. – wsanville
Il div centrato è al 100% in altezza - la domanda originale era 200px. Non funziona se rimuovi anche l'altezza del 100% (almeno non in Chrome). Firefox non funziona bene sulla mia macchina quindi non posso provarlo - spero che Chrome si comporti allo stesso modo. – ClarkeyBoy
Il metodo più semplice? Uno dei numerosi jQuery center plugins disponibile ...
Leggi i commenti sul mio post - "Voglio dire decisamente senza Javascript." – ClarkeyBoy
@ClarkeyBoy: Ok ... quel commento non c'era quando ho iniziato a scrivere ... Nessun problema! – Lorenzo
Questo non merita un down down poiché il post originale non diceva esplicitamente senza JS. Sto andando in suvote solo per quella ragione :) – Marko
Non so se questo è il modo più semplice, ma sembra funzionare.
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Sto usando esattamente la stessa soluzione che sono :) – Marko
Non sarebbe 'posizione: fixed' essere più appropriato? – sje397
@ sje397, che dipenderebbe dal fatto se vogliono che il div scorra con la pagina o meno. – Marko
@Marco, sembra funzionare senza impostare 'height: 100%' su 'html, body'. Perché è necessario? –