[résolu] Centrer et étirer un div verticalement ?

Bonjour,

Je sais qu'il est facile de centrer en vertical un div d'une taille précise sur une page en définissant ses marges en négatif (cf. code ci-dessous), en revanche je n'arrive pas à trouver un moyen de centrer mon div de manière verticale, si les tailles de celui-ci sont définies en pourcentages.

Connaitriez-vous un moyen de contourner le problème ?

#global {
  	position:absolute; 
  	left: 50%;  
  	top: 50%; 
  	width: 900px; 
  	height: 550px; 
  	margin-top: -275px;
  	margin-left: -450px;
	background-color:#777777;
} 

Merci beaucoup.
Modifié par Mastah (26 Jan 2011 - 09:49)

bonsoir,

eventuellement ceci:

http://yidille.free.fr/plux/valign/?10-5-pistes-pour-centrer-en-xy-vos-pages
( voir en bas de page les gabarits demo , les table, display:table ou inline-block sont fluide. les 2 base en positionement absolue sont en hauteur fixe ).

En fait il y a quelques pistes de plus ... , un moteur de recherche devrait t'aider a un decouvrir d'autres et les apprehender.

La plus solide reste encore un tableau, pour les autres methodes il s'agit d'un choix personnel (celle que tu comprend ou maitrise le mieux ou qui te semble le moins "bidouille").

GC

Attention les propriétés display "table" et "inline-block" ne sont pas gérées de la même manière par tous les navigateurs.

En supposant que ta div fait 50% de hauteur, si celle ci est positionnée en absolu, tu peux spécifier :

div {
  position:absolute;
  top:25%;
  bottom:25%;
}

Modifié par Jiho (25 Jan 2011 - 19:15)

Jiho a écrit :
Attention les propriétés display "table" et "inline-block" ne sont pas gérées de la même manière par tous les navigateurs.

Ce defaut est clairement indiqué dans le lien precité , les corrections necessaires sont présentes dans les styles ... et sans forcement analysé la feuille de style , il suffit de tester les gabarits dans les differents navigateurs pour se convaincre qu'ils sont utiles ou non et enregistrer éventuellement la base qui vous convient.

Idem pour le defaut des marges négatives contenu par un min-width et min-height (inclus une alternative equivalente pour IE6).

Jiho a écrit :
Attention les propriétés display "table" et "inline-block" ne sont pas gérées de la même manière par tous les navigateurs.

En supposant que ta div fait 50% de hauteur, si celle ci est positionnée en absolu, tu peux spécifier :

div {
  position:absolute;
  top:25%;
  bottom:25%;
}

Bonjour, merci beaucoup ! C'était exactement l'effet que je recherchais, et en effet c'était tout simple...

Encore merci !