Center verticalement un DIV

**Clad3** · 11/01/2009, 22h43

Bonjour,

Ce petit problème semble récurrent en CSS et je cherche une façons simple (fonctionnant sous IE et FF) de le résoudre.

Je veux simplement placer un DIV à mi hauteur de ma page (de mon body).
Ce div aura une taille fixe de X par Y pixels. J'arrive avec les margin:right et left à le centrer horizontalement mais pas verticalement.

Comment faire?

**popovitch130** · 12/01/2009, 00h34

en positionnement absolu c'est pas possible ? (si ton site a une taille fixé en hauteur)

**Clad3** · 12/01/2009, 00h39

Si ( doù mon tag "résolu"

)

Comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#main
{
	position:absolute;
	background-color:#00FF00;
	width: 700px ;
	height: 340px ;
	top:50%;
	left:50%;
	margin-top:-170px;
	margin-left:-350px;
}

Maintenant je n'arrive pas à positioner verticalement mon div à une autre position que le centre ... ( par exemple a 70% de la hauteur). Hop, ca m'apprendra à mettre mon problème résolu alors qu'il est encore là ^^

Edit : Allez zou, j'ai résolu mes problèmes avec des solutions qui m'on parrut bien tordu ... mais après tout, je crois que c'est le css qui veux ca

**Macmillenium** · 12/01/2009, 10h56

Bonjour,

La seule propriété CSS qui permet logiquement l'alignement verticale est vertical-align-middle, cette propriété n'est prévu que pour aligner les éléments de type inline et table-cell (malheureusement non supporté par IE6).
J'ai pensé à deux solutions qui peuvent fonctionner même sans fixer d'hauteur.

1er solution pour les navigateurs supportant table-cell :

Code HTML et CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<style type="text/css">
	body, html { height:100%; }
	#page { height:100%; width:100%; display:table; background:red; }
	.container { display:table-cell; vertical-align:middle; }
	.content { background:green; }
	</style>
 
</head>
 
<body>
	<div id="page">
		<div class="container">
			<div class="content">
				bla bla
			</div>
		</div>
	</div>
</body>

Grâce à table-cell, l'élément se comporte comme une cellule de tableau et donc aucun problème pour utiliser vertical-align quelque que soit le type des blocs enfants.

2eme solution pour IE6, assez lourde en la comparant avec table-cell ...
Positionner le container en absolute et lui appliquer un top:50% ensuite positionner le content en relative et le retirer avec un top:-50%, ceci positionne content bien au milieu quelque soit sa hauteur :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
	<!--[if IE 6]> 
	<style type="text/css">
	#page { position:relative;  }
	.container {  position:absolute; height:200px; top:50%; }
	.content { position:relative; top:-50%;  }
	</style>
	<![endif]-->

Le code en résumé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<style type="text/css">
	body, html { height:100%; }
	#page { height:100%; width:100%; display:table; background:red; overflow:hidden }
	.container { display:table-cell; vertical-align:middle; }
	.content { background:green; }
	</style>
 
	<!--[if IE 6]> 
	<style type="text/css">
	#page { position:relative;  }
	.container {  position:absolute; height:200px; top:50%; }
	.content { position:relative; top:-50%;  }
	</style>
	<![endif]-->
 
</head>
 
<body>
	<div id="page">
		<div class="container">
			<div class="content">
				bla bla
			</div>
		</div>
	</div>
</body>

Center verticalement un DIV

CSS

Discussions similaires

Partager

Partager