Come mettere un div nel centro del browser sia verticalmente che orizzontalmente usando solo il CSS?Come mettere un div nel centro del browser usando i CSS?
Assicurarsi che funzioni anche su IE7.
Se tutto fallisce, potremmo usare JavaScript, ma un'ultima scelta.
HTML:
<div id="something">... content ...</div>
CSS:
#something {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
La soluzione più semplice è solo quello di utilizzare un margine di auto, e dare il vostro div una larghezza e altezza fissa. Questo funziona in IE7, FF, Opera, Safari e Chrome:
HTML:
<body>
<div class="centered">...</div>
</body>
CSS:
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
margin: auto;
width: 400px;
height: 200px;
}
EDIT !! Scusa, ho appena notato che hai detto verticalmente ... il margine "automatico" predefinito per la parte superiore e inferiore è zero ... quindi questo lo centrerà solo orizzontalmente. L'unica soluzione per posizionarsi verticalmente e orizzontalmente è di andare in giro con margini negativi come la risposta accettata.
È inoltre possibile impostare il div con il seguente:
#something {width: 400px; margin: auto;}
Con tale impostazione, il div avrà un set con, e il margine e ai lati si imposterà automaticamente a seconda del con del browser.
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
#distance
{
width:1px;
height:50%;
margin-bottom:-300px;
float:left;
}
#something
{
position:relative;
margin:0 auto;
text-align:left;
clear:left;
width:800px;
min-height:600px;
height:auto;
border: solid 1px #993333;
z-index: 0;
}
/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="something">
</div>
</body>
</html>
testato in FF2-3, IE6-7, Opera e funziona bene!
per browser meno recenti, è necessario aggiungere questa riga in cima al documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
provare questo
#center_div
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Usando questo:
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
.center {
margin: auto;
margin-top: 15vh;
}
Dovrebbe fai il trucco
Perché un margine negativo qui? Grazie! –
Perché compensa la dimensione del div. in alto e a sinistra il 50% renderebbe la parte superiore e sinistra dell'elemento al centro della pagina, non l'elemento stesso. I margini negativi sono esattamente la metà della dimensione dell'elemento e costituiscono la differenza in modo che l'elemento stesso sia centrato, non solo i suoi lati superiore e sinistro. – tj111
Ew. Perché dovresti posizionarti assolutamente? Usa il modello di scatola maledetta nel modo in cui è stato progettato. –