Utilisation de la marge: auto pour aligner verticalement un div

Donc, je sais que nous pouvons centrer une div horizontalement si nous utilisons margin:0 auto;. Devrait margin:auto auto;fonctionner comme je pense que cela devrait fonctionner? Le centrer verticalement également?

Pourquoi ne vertical-align:middle;fonctionne pas non plus?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Mise à jour août 2020

Bien que ce qui suit vaut toujours la peine d'être lu pour les informations utiles, nous avons Flexbox depuis un certain temps maintenant, alors utilisez-le simplement, conformément à cette réponse .

Vous ne pouvez pas utiliser:

vertical-align:middlecar il ne s'applique pas aux éléments de niveau bloc

margin-top:autoet margin-bottom:autoparce que leurs valeurs utilisées seraient égales à zéro

margin-top:-50%car les valeurs de marge basées sur un pourcentage sont calculées par rapport à la largeur du bloc conteneur

En fait, la nature du flux de documents et les algorithmes de calcul de la hauteur des éléments rendent impossible l'utilisation des marges pour centrer un élément verticalement à l'intérieur de son parent. Chaque fois que la valeur d'une marge verticale est modifiée, cela déclenchera un recalcul de la hauteur de l'élément parent (re-flux), qui à son tour déclencherait un recentrage de l'élément d'origine ... en faisant une boucle infinie.

Vous pouvez utiliser:

Quelques solutions de contournement comme celle-ci qui fonctionnent pour votre scénario; les trois éléments doivent être imbriqués comme ceci:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle fonctionne correctement selon Browsershot.

Depuis que cette question a été posée en 2012 et que nous avons parcouru un long chemin avec le support du navigateur pour les flexbox, j'ai eu l'impression que cette réponse était obligatoire.

Si l'affichage de votre conteneur parent est flex, alors oui , margin: auto auto(également appelé margin: auto) fonctionnera pour le centrer à la fois horizontalement et verticalement, qu'il s'agisse d'un élément inlineou block.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Notez que la largeur / hauteur n'a pas à être spécifiée de manière absolue, comme dans cet exemple jfiddle qui utilise le dimensionnement par rapport à la fenêtre.

Bien que la prise en charge des boîtiers flexibles par les navigateurs soit à un niveau record au moment de la publication, de nombreux navigateurs ne la prennent toujours pas en charge ou nécessitent des préfixes de fournisseur. Consultez http://caniuse.com/flexbox pour obtenir des informations mises à jour sur la prise en charge du navigateur.

Mettre à jour

Étant donné que cette réponse a reçu un peu d'attention, je tiens également à souligner que vous n'avez pas du tout besoin de spécifier marginsi vous utilisez display: flexet souhaitez centrer tous les éléments du conteneur:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Voici la meilleure solution que j'ai trouvée: http://jsfiddle.net/yWnZ2/446/ Fonctionne dans Chrome, Firefox, Safari, IE8-11 et Edge.

Si vous avez une déclaration height( height: 1em, height: 50%, etc.) ou il est un élément sur lequel le navigateur connaît la hauteur ( img, svgou canvaspar exemple), tout ce que vous avez besoin pour le centrage vertical est la suivante:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Vous voudrez généralement spécifier un widthou max-widthdeux, le contenu ne s'étend pas sur toute la longueur de l'écran / du conteneur.

Si vous l'utilisez pour un modal que vous souhaitez toujours centré dans la fenêtre chevauchant un autre contenu, utilisez position: fixed;pour les deux éléments au lieu de position: absolute. http://jsfiddle.net/yWnZ2/445/

Voici un résumé plus complet: http://codepen.io/shshaw/pen/gEiDt

Edit: c'est 2020, j'utiliserais plutôt une boîte flexible.

Réponse originale:

HTML

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Je sais que la question date de 2012, mais j'ai trouvé le moyen le plus simple et je voulais partager.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

et CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Si vous connaissez la hauteur du div que vous souhaitez centrer , vous pouvez le positionner de manière absolue dans son parent, puis définir la topvaleur sur 50%. Cela mettra le haut du div enfant à 50% de son parent, c'est-à-dire trop bas. Tirez-le vers le haut en le réglant margin-topà la moitié de sa hauteur. Alors maintenant, vous avez le milieu vertical du div enfant assis au milieu vertical du parent - centré verticalement!

Exemple:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Ces deux solutions ne nécessitent que deux éléments imbriqués.
Première - Positionnement relatif et absolu si le contenu est statique (centre manuel).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

ou pour une conception fluide - pour le centre de contenu exact, utilisez plutôt l'exemple ci-dessous:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Vous devez définir «hauteur min» au cas où le contenu dépasserait 50% de la hauteur de la fenêtre. Vous pouvez également manipuler cette hauteur avec une requête multimédia pour les appareils mobiles et tablettes. Mais seulement si vous jouez avec un design réactif.

Je suppose que vous pouvez aller plus loin et utiliser un simple script JavaScript / JQuery pour manipuler la hauteur minimale ou la hauteur fixe s'il y a un besoin pour une raison quelconque.

Deuxièmement - si le contenu est fluide, vous pouvez également utiliser les propriétés css de table et de cellule de tableau avec un alignement vertical et un alignement du texte centré:

/*in a wrapper*/  
display:table;   

et

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Fonctionne et s'adapte parfaitement, souvent utilisée comme solution de conception Web réactive avec des mises en page de grille et des requêtes multimédias qui manipulent la largeur de l'objet.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

Je préfère une solution de table pour le centrage exact du contenu, mais dans certains cas, le positionnement absolu relatif fera mieux, surtout si nous ne voulons pas conserver la proportion exacte d'alignement du contenu.

Il n'y a pas un moyen facile de centrer la div verticalement qui ferait l'affaire dans toutes les situations.

Cependant, il existe de nombreuses façons de le faire en fonction de la situation.

En voici quelques-uns:

• Définissez le remplissage supérieur et inférieur de l'élément parent, par exemple, le remplissage: 20px 0px 20px 0px
• Utiliser un tableau, la cellule du tableau centre son contenu verticalement
• Définissez la position relative de l'élément parent et les div que vous souhaitez centrer verticalement sur absolus et définissez-le comme top: 50px; bas: 50px; par exemple

Vous pouvez également rechercher sur Google le "centrage vertical css"

hauteur variable, marge haut et bas auto

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

hauteur variable, marge haut et bas auto

Utilisation de Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Voir résultat

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>