CSS - Centrer verticalement une div

Bonsoir,

Ce sujet à été abordé maintes fois (j'ai d'ailleurs lu tous les tutoriels d'alsacreations concernant ce sujet), mais je n'ai malheureusement pas réussi à faire ce que je voulais.

Mon but est tout simplement de centrer une div dans une div conteneur. Le centrage horizontal marche parfaitement, mais le centrage vertical ne fonctionne pas.

Voila mon code:

<div id="top">
     <div id="top_content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div>
</div>

div#top {
	position: absolute;
	top: 0%; left: 0%;
	height: 30%; width: 100%;
	text-align: center;
	background-color:blue;
}
div#top_content {
	position: relative;
	background-color:violet;
	display: inline-block;
	vertical-align: middle;
}

Comment faire pour centrer verticalement la div "#top_content" ?

Merci infiniment pour votre aide !

Bonsoir,

La propriété vertical-align a deux vocations concernant le centrage :
1) Centrer verticalement des éléments de type en-ligne les uns par rapport aux autres
2) Centrer verticalement un bloc de texte dans un conteneur

L'exemple fourni ci-après permet de visionner les deux cas de figure.

HTML :

<div id="top">
	<div id="top_content">
	Lorem ipsum dolor sit amet, consectetur <span>adipisicing</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
</div>

CSS :

#top {
	width: 1200px;
	height: 200px;
	display: table-cell;
	background-color: blue;
	text-align: center;
	vertical-align: middle;
}

#top_content {
	background-color: violet;
}

#top_content span {
	font-size: 70px;
	vertical-align: middle;
}

1) La portion de texte plus grande (contenue dans un <span>) est centrée verticalement par rapport au reste du texte.

2) La <div> d'ID "top_content" est centrée verticalement par rapport à la <div> conteneur d'ID "top". Normalement cette action n'est réalisable que dans une cellule de tableau. C'est pourquoi on ajoute la déclaration display: table-cell; (non reconnue par IE < 7) qui permet de faire se comporter l'élément sur lequel elle s'applique (ici une <div>) comme une cellule de tableau.

Hormis vertical-align, une autre solution consiste à utiliser le positionnement absolu sur la <div> d'ID "top_content", associé à la propriété top et à un margin-top négatif.

Enfin s'il n'y a qu'une seule ligne de texte à centrer, la technique la plus appropriée revient à employer la propriété CSS line-height.

MAIS la plupart de ces techniques sont difficilement applicables sur des éléments dont la hauteur est spécifiée en pourcentages.

Merci ! Malheureusement le centrage vertical ne marche pas : je pense que cela vient, comme vous l'avez dit, du fait que ma div #top a une hauteur spécifiée en pourcentage.

Pour l'instant, je suis donc encore obligé de me rabattre sur une solution avec un tableau... C'est contre-nature (au niveau du CSS), mais j'ai pas le choix.

zorterano_12 a écrit :
Pour l'instant, je suis donc encore obligé de me rabattre sur une solution avec un tableau... C'est contre-nature (au niveau du CSS), mais j'ai pas le choix.

Tout ce que tu fais avec un tableau de mise en page tu peux le faire avec display:table / display:table-cell en CSS, hein.

Oui. Mais le vilain canard qu'est IE n'accepte cela que dans sa version 8 je crois... A quand une mise à jour forcée vers IE9 ou vers un autre navigateur - je crois que là par contre c'est impossible - ?

Bonjour,

jeremy-p a écrit :
C'est pourquoi on ajoute la déclaration display: table-cell; (non reconnue par IE < 7)

Je tiens à corriger mon erreur : non reconnue par IE <= 7.
Comme vous l'avez dit zorterano_12, cette déclaration n'est reconnue qu'à partir de la version 8 d'IE.

Quoi qu'il en soit si vous visez une compatibilité optimale avec ces vieux navigateurs, il faudrait certainement passer par un tableau ou du Javascript si les valeurs en pourcentages sont nécessaires à votre mise en page (veiller tout de même à ce que le contenu reste lisible si Javascript est désactivé). Néanmoins je n'aime pas du tout l'idée d'employer un tableau pour de la mise en page et encore moins que la mise en forme dépende de Javascript...

Malgré tout j'ai essayé un bout de code qui marche comme je le souhaite sur Google Chrome, mais qui ne daigne pas fonctionner sur Firefox 7 et IE9.

HTML :

<div id="top">
	<div id="top_content">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
</div>

CSS :

#top {
	width: 100%;
	height: 30%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: blue;
	text-align: center;
}

#top_content {
	width: 100%;
	height: 50%;
	margin-top: -25%;
	position: absolute;
	top: 50%;
	background-color: violet;
}

Le problème provient de la déclaration margin-top: -25%; que Google Chrome n'interprète pas forcément comme il le faut, mais en tout cas comme je le souhaite.

Je suis curieux de savoir pourquoi si quelqu'un a la réponse ?!