Centrare verticalmente un div con i CSS

**GiorgioMartini** · 03-10-2004, 19:03

Ciao a tutti,
domanda niubbissima in arrivo

Come faccio a centrare verticalmente un div (o un qualunque altro elemento block) in una pagina (dove, ovviamente, quello è l'unico elemento presente) ?

Grazie in anticipo

**awd** · 03-10-2004, 19:16

sta domanda l'avevo fatta un anno fa, mi ricordo!
Se nel frattempo nn è stata trovata una soluzione, non c'è modo di centrare verticalmente un elemento in un div! infatti ho dovuto usare una tabella

**GiorgioMartini** · 03-10-2004, 19:21

Nooo

Le tabelle non le sopporto... sto lavorando per un design table-less.

Anche con la tabella, come faresti?

- riga altezza variabile
- riga con contenuto
- riga altezza variabile

?

:master:

**Francis87** · 03-10-2004, 19:23

di questo problema se ne parla quasi ogni giorno...
una ricerca e trovi la soluzione..
sinceramente (dato ke nn mi è mai servita questa cosa) nn so come si risolva il problema, ma ciò ke farei io è:

dare a html e body >> height: 100%;
al div >> margin: auto 0px; height: 300px;

prova così...

**flanza** · 03-10-2004, 19:26

prova questo:

codice:

<style>
body,html { 
height:100%;
margin:0;
background:#000; }
#box {
width:400px; height:400px;
position:absolute;
top:50%;left:50%;
margin:-200px 0 0 -200px;
border:1px solid #000;
background-color:#f00;
overflow:auto;
}
</style>

<html><body scroll=no>



<div id="box">
contenuto







qqq
</div>
</body>
</html>

**awd** · 03-10-2004, 19:31

con la tabella è facile: metti height e width al 100%, e poi centri la cella con <td align="center" valign="middle"> (centrata in mezzo alla pagina)
almeno io avevo fatto così!

**GiorgioMartini** · 03-10-2004, 19:37

flanza:

non ho usato il tuo codice, ma ho copiato l'idea di usare il position:absolute e poi i margini negativi

e funziona da dio

**awd** · 03-10-2004, 19:41

Originariamente inviato da GiorgioMartini
flanza:

non ho usato il tuo codice, ma ho copiato l'idea di usare il position:absolute e poi i margini negativi

e funziona da dio

posta la tua soluzione!

**GiorgioMartini** · 03-10-2004, 19:46

Allora:

index.css

codice:

html, body {
	margin: 0px;
	border: 0px;
	padding: 0px;
	height: 100%;
}

#main {
	background: url(background.jpg);
	width: 550px;
	height: 400px;
	border: 1px dashed grey;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -275px;
}

index.html

codice:

<html>
<head>
<title>blabla</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
	<div id="main">
		<div id="blabla">blabla</div>
		<div id="blabla">blabla</div>
	</div>
</body>
</html>

**awd** · 04-10-2004, 16:25

Ciao, ho provato la tua soluzione e sembra funzionare però non mi è chiaro il concetto con cui l'hai sviluppata, mi puoi spiegare? Scusa ma è un anno che nn lavoro più coi css e sono decisamente arrugginito

Discussione: Centrare verticalmente un div con i CSS

Strumenti discussione

Ricerca discussione

Visualizza

Centrare verticalmente un div con i CSS

Permessi di invio