Centrage vertical d'une div à l'intérieur d'une autre div

Question

Je veux centrer un div qui est à l'intérieur d'un autre div.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

Voici la CSS que j'utilise actuellement.

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }

    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Comme vous pouvez le constater, l'approche que j'utilise maintenant dépend de la largeur et de la hauteur de l'écran de l'ordinateur. #innerDiv . Si la largeur/hauteur change, je devrai modifier la margin-top y margin-left valeurs. Existe-t-il une solution générique que je peux utiliser pour centrer les #innerDiv indépendamment de sa taille ?

J'ai compris qu'en utilisant margin: auto peut aligner horizontalement le #innerDiv au milieu. Mais qu'en est-il de l'alignement vertical ?

Answer 1

en résumé

L'alignement vertical au milieu fonctionne, mais vous devrez utiliser table-cell sur votre élément parent et inline-block sur l'enfant.

Cette solution ne fonctionnera pas dans IE6 et 7.
Le vôtre est le plus sûr pour ceux-là.
Mais comme vous avez indiqué dans votre question que vous utilisiez CSS3 et HTML5, je pensais que cela ne vous dérangeait pas d'utiliser une solution moderne.

La solution classique (mise en page du tableau)

C'était ma réponse initiale. Elle fonctionne toujours très bien et constitue la solution la plus largement acceptée. Table-layout avoir un impact sur vos performances de rendu Je vous suggère donc d'utiliser l'une des solutions les plus modernes.

Voici un exemple

---

Testé dans :

• FF3.5+.
• FF4+
• Safari 5+
• Chrome 11+ (en anglais)
• IE9+.

---

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

---

Solution moderne (transformer)

Puisque les transformations sont assez bien supporté maintenant il y a un moyen plus facile de le faire.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Démo

---

♥ ma solution moderne préférée (flexbox)

J'ai commencé à utiliser flexbox de plus en plus Il est également bien soutenu maintenant C'est de loin le moyen le plus facile.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Démo

Autres exemples et possibilités : Comparer toutes les méthodes sur une seule page

Answer 2

Une autre façon de réaliser ce centrage horizontal et vertical est :

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( Référence )

Answer 3

Une autre façon est d'utiliser Transformer Traduire

La division extérieure doit fixer son position a relative ou fixed et la division intérieure doit fixer son position a absolute , top y left a 50% et appliquer un transform: translate(-50%, -50%) .

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;

}

<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Testé dans :

• Opera 24.0 (minimum 12.1)
• Safari 5.1.7 (minimum 4 avec le préfixe -webkit-)
• Firefox 31.0 (minimum 3.6 avec le préfixe -moz-, à partir de 16 sans préfixe)
• Chrome 36 (minimum 11 avec le préfixe -webkit-, à partir de 36 sans préfixe)
• IE 11, 10 (minimum 9 avec le préfixe -ms-, à partir de 10 sans préfixe)
• Plus de navigateurs, puis-je utiliser ?

Answer 4

Au lieu de m'empêtrer dans un nœud avec des CSS difficiles à écrire et à maintenir (qui doivent aussi être soigneusement validés par les navigateurs !), je trouve qu'il est bien mieux d'abandonner les CSS et d'utiliser à la place un HTML 1.0 merveilleusement simple :

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

Cela permet d'accomplir tout ce que l'affiche originale voulait, tout en étant robuste et facile à maintenir.

Answer 5

J'utilise la solution suivante depuis plus d'un an, elle fonctionne également avec IE 7 et 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>