Centrer verticalement une div dans le body

**kranagard** · 21/02/2013, 17h30

Bonjour, je cherche à afficher une div (en gros une image, un peu de texte, dans ce genre) au milieu de ma page, la centrer horizontalement aucun soucis mais verticalement même en cherchant sur le net et en copiant les exemples partiels que je trouve rien ne fonctionne

j'arrive à quelque chose si j'utilise les px, mais en % impossible de le faire aller

Code 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
23
24
25
body{
	background-color:#000;
	background-attachment:fixed;
	width:100%;
	height:100%;
}


#middle{
	position: absolute;
	top: 50%;
}
#inner{
	position:relative;
	top:-100px;
	background-image:url(background.png);
	background-attachment:fixed;
	margin:auto;
	border:#333;
	border-width:50px;
	border-style:solid;
	width:70%;
	height: 80%;
	text-align:center;
}

Code html :

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

1
2
3
4
5
6
7
<body>
    <div id="middle">
        <div id="inner">
            <img src="image.JPG" /> 
        </div>
    </div>		
</body>

la valeur en rouge me déplace bien ma div, maintenant sa valeur dépend de la résolution du client, et en "%" rien ne se passe

je commence à peine le css donc il y a surement des incohérences dû aux multiples tentatives dans le css et toute aide est la bienvenue.

**rodolphebrd** · 21/02/2013, 19h17

Bonjour,

la propriété vertical-align:middle; fonctionne avec un doctype strict.

**NoSmoking** · 23/02/2013, 09h38

Bonjour,
si tu connais la hauteur/largeur de la DIV en final, tu peux utiliser la technique des marges négatives.

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Centrage dans BODY]</title>
<style>
html, body{
  height:100%;
  margin:0;
  padding:0;
}
#conteneur{
  position:absolute;
  background-color:#EEF;
  width:400px;
  height:400px;
  top:50%;
  left:50%;
  margin-top: -200px;
  margin-left:-200px;
}
</style>
</head>
<body>
<div id="conteneur">
</div>
</body>
</html>

**rodolphebrd** · 23/02/2013, 11h38

Bonjour,

Pour les images je vous conseille ce code:

Code css :

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

1
2
3
4
5
6
img {
max-width: 100%; 
height: auto;
width: auto ;
box-sizing: border-box;
}

**Candygirl** · 25/02/2013, 08h30

Bonjour,

Un exemple minimaliste avec un centrage à l'aide d'un display:table-cell. Fonctionne à partir de IE8. Le table-cell a l'avantage de s’affranchir des dimensions et ne pose pas le même problème que les marges négatives en cas de petites fenêtres (pb contournable à l'aide de min-width/height sur IE7+).

Si le centrage vertical est absolument requis pour les vieilleries IE6 et 7, on peut passer par des commentaires conditionnels pour y pallier.

Code html :

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>
<html lang="fr-FR">
<head>
	<meta charset="utf-8" />
	<title>centrage vertical</title>
	<style>
        html,body {
                height:100%;
                display:table;
                width:100%;
        }
        
        body {
                display:table-cell;
                vertical-align:middle;
        }
        
        img {
                display:block;
                margin:0 auto;
        }
        </style>
 
 
</head>
 
<body>
	<img src="image.png" alt="image" />
</body>
</html>

**kranagard** · 04/03/2013, 14h07

Merci pour vos réponse, j'ai testé le centrage via table-cell qui correspond à ce que j'avais mis en place (plus ou moins) de mon cotes. Celui ci fonctionne bien merci

Centrer verticalement une div dans le body

Centrer un élément en CSS

Discussions similaires

Partager

Partager