CSS: aligner verticalement div lorsque aucune taille fixe du div n’est connue

Ceci est une solution CSS2 pure pour le centrage horizontal et vertical sans tailles connues de conteneur ou enfant. Aucun piratage n’est impliqué. Je l’ai découvert pour cette réponse et je l’ai également démontré dans cette réponse .

La solution est basée sur vertical-align: middle conjointement avec la line-height: 0 , quel parent a une hauteur de ligne fixe.

Le HTML:

Et le CSS:

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } #center { position: relative; display: block; top: 50%; margin-top: -1000px; height: 2000px; text-align: center; line-height: 2000px; } #wrap { line-height: 0; } #wrap img { vertical-align: middle; } 

Testé sur Win7 sous IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

La seule mise en garde est IE7, pour laquelle les deux éléments les plus internes doivent être déclarés sur une ligne, comme le montre ce violon :

Notez que les intervalles sont également requirejs pour IE7. Dans tous les autres navigateurs, les intervalles peuvent être des div.

Vous pouvez le faire en utilisant des blocs en ligne, un avec height: 100% (et mêmes hauteurs pour HTML et BODY ) et vertical-align: middle .

Exemple 1: http://jsfiddle.net/kizu/TQX9b/ (beaucoup de contenu, donc toute la largeur)

Exemple 2: http://jsfiddle.net/kizu/TQX9b/2/ (une image de toute taille)

Dans cet exemple, j’utilise span s, donc cela fonctionnerait dans IE sans hacks, si vous souhaitez utiliser div s, n’oubliez pas d’append des commentaires conditionnels pour IE .helper, .content { display: inline; zoom: 1; } .helper, .content { display: inline; zoom: 1; } .helper, .content { display: inline; zoom: 1; } , les blocs en ligne fonctionnent donc pour les éléments de bloc.

Outre les autres réponses, le modèle de boîte flexible CSS3 vous permettra, entre autres, d’y parvenir.

Vous n’avez besoin que d’un seul élément de conteneur. Tout ce qui se trouve à l’intérieur sera disposé selon les règles du modèle de boîte flexible.

Le CSS est assez simple, en fait:

 .container { display: box; box-orient: horizontal; box-pack: center; box-align: center; } 

J’ai omis les règles préfixées par le fournisseur pour des raisons de concision.

Voici une démo dans laquelle l’img est toujours au centre de la page: http://jsfiddle.net/zn8bm/

Notez que Flexbox est une spécification naissante et qu’elle n’est actuellement implémentée que dans Safari, Chrome et Firefox 4+.

Je recommanderais cette solution par Bruno: http://www.brunildo.org/test/img_center.html

Cependant, j’ai rencontré un problème avec sa solution w / r / t webkit. Il semble que webkit rendait un petit espace en haut de la div si la span vide était autorisée à être là. Donc, pour ma solution, je n’ajoute que l’espace vide si je détecte que le navigateur est IE (si quelqu’un sait comment se débarrasser de l’espace, faites-le moi savoir!).

HTML:

CSS:

 .outerdiv { display: table-cell; width: 200px; height: 150px; text-align: center; vertical-align: middle; } .ie_vertical_align * { vertical-align: middle; } .ie_vertical_align span { display: inline-block; height: 150px; width: 0; } 

Et si je détecte que le navigateur est IE, j’ajoute un élément span vide avant la balise img et un style css pour qu’il ressemble à ceci:

Voici un JSFiddle avec ce code.

Dušan Janovský, développeur web tchèque, a publié il y a quelque temps une solution multi-navigateur. Lire http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Si vous ne vous souciez pas d’IE7 et des versions ultérieures, vous n’avez pas besoin d’utiliser plusieurs div nesteds. Si vous avez un div à aligner verticalement, ce div se trouve dans un conteneur (même si le conteneur est votre ). Par conséquent, vous pouvez spécifier display: table-cell et vertical-align: middle sur le conteneur, puis votre div sera centré verticalement.

Cependant, si vous vous souciez d’IE7 et des versions ultérieures, vous aurez besoin d’un conteneur supplémentaire pour le faire fonctionner (oui, via un hack).

Jetez un oeil à ce violon Il s’affiche correctement dans IE6-9 et les autres principaux navigateurs. #container2 est uniquement présent pour IE7 et les versions ultérieures, donc si vous ne vous en souciez pas, vous pouvez le supprimer ainsi que les styles conditionnels spécifiques à IE.

Définir l’image comme arrière-plan du div et l’aligner au centre

essayez l’astuce de remplissage à 50%:

   
test
   

Ceci est possible si vous connaissez la hauteur de l’image ou de l’object flash à centrer. Vous n’avez pas besoin de connaître la hauteur / largeur du conteneur, mais vous devez connaître la hauteur / largeur contenue.

C’est possible en utilisant des marges flottantes, claires et négatives. Exemple: http://www.laurenackley.com page d’accueil.

html

 
 
 
 
 
stuff
 
  

css

 #vertical-center{ height:50%; width:1px; float:left; margin-bottom:-50px;/** 1/2 of inner div's known height **/ } #contained-with-known-height{ height:100px; clear:left; margin:0 auto;/** horizontal center **/ width:700px; text-align:left; } #container{/** or body **/ text-align:center; /** width and height unknown **/ } 

Si vous ne connaissez pas les éléments internes largeur / hauteur. Vous n’avez pas de chance avec

. BUT – les cellules de tableau (

) prennent en charge vertical-align:middle; Si vous ne pouvez pas le faire avec le truc ci-dessus, allez avec une table à l’intérieur du conteneur, et placez le div que vous centrez dans un td avec un milieu d’alignement vertical.