[HTML] centrer un DIV sur l'écran

**FredericB** · 02/09/2008, 19h17

Bonjour,

J'ai un problème pour centrer mon DIV.
J'utilise le code suivant pour centrer un DIV que j'affiche quand je clique sur un bouton (en fait mon DIV contient un formulaire):

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#monDiv {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     height: 400px;
     margin-top: -200px;
     margin-left: -350px;
}

Ce code marche très bien sur une page qui a la taille de l'écran, mais quand ma page est plus grande que mon écran (donc utilisation du scrollbar vertical), et que je descend au bas de ma page, et que je clique sur mon bouton pour afficher le DIV centré, ce DIV n'est plus centré sur mon écran. Il apparait plus haut sur ma page.
Donc ma question est:
Comment faire apparaitre mon DIV centré par rapport à l'écran, même si ma page est plus grande que l'écran ?

Merci d'avance pour vos aides.
Fred

**blueice** · 02/09/2008, 21h23

Sans code HTML ca va être dur, tu fais quoi ?
Une ancre html pour remonter ?

**FredericB** · 02/09/2008, 21h44

salut,

non, je remonte ma page pour accéder à mon DIV (quand je clique sur mon bouton, je met ce DIV en visible) avec le scrollbar.

Pour l'instant je me suis dépanné en affichant le DIV à la position de la souris, comme ça plus de problème avec la hauteur de la page.

Mais j'aimerais quand même pouvoir afficher au centre de l'écran un DIV, même si la hauteur de ma page est plus grande que celle de l'écran.

Merci

**Ksual** · 03/09/2008, 02h23

le positionnement est gérée par le navigateur et non par l'écran, l'écran affiche ce que le navigateur rend, et ton code est le bon.

autrement: http://www.ajaxrain.com/tagcloud.php?tag=popup#script

**blueice** · 03/09/2008, 08h21

Pourquoi ne pas utiliser une greybox ?
Tu peux charger une autre page qui sera centrée.

**goundoulf** · 03/09/2008, 15h13

il y a plusieurs façons de centrer, notamment les marges négatives, mais ça dépend de tes contraintes

**Sub0** · 13/09/2008, 03h43

C'est possible uniquement en CSS et c'est plus fluide qu'avec JS.
Pour que ça fonctionne aussi avec les scrollbars, il faut utiliser position=fixed :

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
<style type="text/css">
 
body {
margin: 0;
padding: 0;
height: 2000px;
width: 2000px;
}
 
#global {
position: fixed;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px; /* moitié de la hauteur */
margin-left: -100px; /* moitié de la largeur */
border: 1px solid #333;
background-color: #eee;
}
</style>
</head>
 
<body>
<div id="global">
<p>Ici le contenu</p>
</div>
</body>
 
</html>

**Sub0** · 13/09/2008, 18h19

J'ai oublié, le doctype est important. Testé avec :

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

**FredericB** · 15/09/2008, 21h03

Salut,

Merci Sub0, ca marche super bien.

[HTML] centrer un DIV sur l'écran

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager