CSS: aligner verticalement div lorsque aucune taille fixe de la div n'est connue

Question

Comment aligner un <div> qui contient une image (ou un flash) verticalement avec CSS. La hauteur et la largeur sont dynamiques.

Answer 1

C'est un pur CSS2 solution à l'horizontal et à la verticale de centrage, sans connaître les tailles de conteneur, ni les enfants. Pas de hacks sont impliqués. Je l'ai découvert pour cette réponse et j'ai aussi démontré dans cette réponse.

La solution est basée sur vertical-align: middle en conjonction avec d' line-height: 0, le parent qui a une ligne fixe-hauteur.

Le code HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

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 dans IE8, IE9, Opéra 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

Le seul inconvénient est de IE7, pour lequel les deux éléments les plus intimes ont déclaré à une seule ligne, comme l'a démontré dans ce violon:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Notez que la durée du sont également nécessaires pour IE7. Dans tous les autres navigateur, la durée peut être en div.

Answer 2

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

Exemple 1: http://jsfiddle.net/kizu/TQX9b/ (beaucoup de contenu, il est donc pleine largeur)

Exemple 2: http://jsfiddle.net/kizu/TQX9b/2/ (une image avec n'importe quelle taille)

Dans cet exemple, j'utilise spans, de sorte qu'Il serait de travailler dans IE sans hacks, si vous souhaitez utiliser divs, n'oubliez pas d'ajouter dans les Commentaires Conditionnels pour IE .helper, .content { display: inline; zoom: 1; }, de sorte que les blocs de travail pour les éléments de bloc.

Answer 3

En plus des autres réponses ici, le CSS3 modèle de boîte flexible , entre autres choses, vous permettent d'atteindre cet objectif.

Vous avez seulement besoin d'un seul élément conteneur. Tout à l'intérieur, il vous sera présentée selon le modèle de boîte flexible des règles.

<div class="container">
    <img src="/logo.png"/>
</div>

Le CSS est assez simple, en fait:

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

J'ai omis de préfixé fournisseur règles pour des raisons de concision.

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

Notez que Flexbox est une nouvelle spécification, et n'est actuellement mis en œuvre dans Safari, Chrome et Firefox 4+.

Answer 4

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

Cependant, j'ai rencontré un problème w/ sa solution de w/r/t webkit. Il semble que webkit a été rendu un petit espace en haut de l' div si le vide span a été autorisé à être là. Donc pour ma solution, je n'ajoute le vide span si je détecte le navigateur IE (Si quelqu'un a des chiffres, comment se débarrasser de l'espace, laissez-moi savoir!) Donc, ma solution finit par être:

---

HTML:

<div class="outerdiv">
    <img src="..." /> 
</div>

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 le navigateur IE-je ajouter un vide span élément avant de l' img tag et un style css de sorte qu'il ressemble:

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

---

Voici un JSFiddle avec ce code.

Answer 5

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