Impossible de centrer mon div verticalement

Version imprimable

04/01/2012, 17h11
sleeg

Impossible de centrer mon div verticalement
Bonjour,

J'ai vu qu'on pouvait centrer des div horizontalement et verticalement avec les propriétés suivantes :
Code:

1 2 3 4 5 6 7 8 position:absolute; width:990px; height:648px; margin-left:50%; left:-495px; margin-top:50%; top:-324px;
Mon div est donc bien centré horizontalement mais verticalement il y a un très grand espace en haut de mon div et pas en dessous...

Quelqu'un pourrait il m'expliquer comment arranger cela car je ne comprend pas vraiment cela... Merci d'avance! et désolé pour ce sujet déjà surement trop expliqué...
04/01/2012, 19h02
Invité

Bonjour,
à priori, le code CSS est juste.

il faut aussi au moins indiquer :
-> un doctype : <!DOCTYPE HTML>
-> dans le css : body { width:100%; height:100%; }

Si le problème persiste, il faudra nous préciser :
- sur quel(s) navigateur(s) et pour quelle version.
- fournir ici un code suffisant (CSS + html)

Bonsoir,
tu y étais presque

Code:

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
31
32
33
34
35
36
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Centrage DIV]</title>
<style type="text/css">
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.class_div {
  position:absolute;
  width:990px;
  height:648px;
  /* ton placement */
  left:-495px;
  top:-324px;
  margin-left:50%;
  margin-top:50%;
  /* essaies cela */
  left:50%;
  top:50%;
  margin-left:-495px;
  margin-top:-324px;
  /* pour voir */
  border:1px solid black;
}
</style>
</head>
<body>
<div class="class_div">
</div>
</body>
</html>

la différence est ci dessous

Code:

1
2
3
4
  left:50%;
  top:50%;
  margin-left:-495px;
  margin-top:-324px;

05/01/2012, 10h17
sleeg

Bonjour et merci pour vos réponses...

Le Doctype y étais, j'ai mis les propriétés de style que vous avez indiqué dans une classe et non en ligne, maintenant ça fonctionne, le problème était peut-être là...