Utilisation de margin: auto pour aligner verticalement div

Question

Je sais donc que nous pouvons centrer une division horizontalement si nous utilisons margin:0 auto; . margin:auto auto; devrait-il fonctionner comme je le pense? Le centrer verticalement aussi?

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

jsFiddle

Answer 1

Vous ne pouvez pas utiliser:

vertical-align:middle parce que c'est pas applicable aux éléments de niveau bloc

margin-top:auto et margin-bottom:auto parce que leurs valeurs de calcul comme zéro

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

En fait, la nature du document de débit et de hauteur d'élément de calcul algorythms rendre impossible l'utilisation des marges pour centrer un élément verticalement à l'intérieur de son parent. Chaque fois qu'une marge verticale de la valeur est modifiée, il sera le déclencheur d'un élément parent hauteur de re-calcul (redistribution), qui serait à son tour déclencher une re-centre de l'élément d'origine... ce qui en fait une boucle infinie.

Vous pouvez utiliser:

Quelques solutions de contournement comme ce qui fonctionne pour votre scénario:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;}
.helper {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  display: table-cell;
  vertical-align: middle;}
.content {
  #position: relative;
  #top: -50%;
  margin:0 auto;
  width:200px;}

Les trois éléments doivent être imbriqués comme suit:

<div class="container">
  <div class="helper">
    <div class="content"><!--stuff--></div>
  </div>
</div>

Trafiqué et fonctionne bien selon browsershot.

Answer 2

Depuis que cette question a été posée en 2012 et nous avons parcouru un long chemin avec la prise en charge du navigateur pour flexboxes, je me sentais comme si cette réponse était obligatoire.

Si l'écran de votre conteneur parent est - flex, alors oui, margin: auto auto travaillera pour le centrer horizontalement et verticalement, peu importe si c'est un inline ou block élément.

Exemple de code HTML:

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

Exemple de CSS:

#parent {
    width: 200px;
    height: 200px;
    display: flex;
}
#child {
    margin: auto;
}

Notez que la largeur/hauteur n'ont pas à être spécifié absolument, comme dans cet exemple jfiddle qui utilise le dimensionnement par rapport à la fenêtre d'affichage.

Bien que la prise en charge du navigateur pour flexboxes est au plus haut de tous les temps au moment de la publication, de nombreux navigateurs ne prennent pas en charge ou d'exiger du fournisseur de préfixes. Reportez-vous à http://caniuse.com/flexbox pour la mise à jour du navigateur des informations de support.

Answer 3

Voici la meilleure solution que j'ai trouvé: http://jsfiddle.net/shshaw/yWnZ2/21/ Fonctionne dans Chrome, Firefox, Safari, et IE8-10, avec quelques mises en garde pour IE8/9 et le navigateur Safari Mobile.

Si vous avez déclaré largeur/hauteur, alors tous les vous avez besoin pour le centrage vertical est ceci:

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

Pour obtenir autour de la déclaration d'une hauteur, il suffit d'ajouter display: table; et il sera centrée verticalement indépendamment du contenu de la hauteur, mais cela rompt avec IE8/9 compatibilité. Vous aurez généralement voulez spécifier une largeur de sorte que le contenu n'est pas de s'étirer sur toute la longueur de l'écran/conteneur.

Si vous utilisez ce pour un modal que vous voulez toujours centré dans la fenêtre qui se chevauchent contenu, utilisez l' position: fixed; pour ces deux éléments au lieu de absolute. http://jsfiddle.net/shshaw/yWnZ2/22/

Voici une information plus complète sur writeup: http://codepen.io/shshaw/pen/gEiDt

Answer 4

Je sais que la question date de 2012, mais j'ai trouvé le moyen le plus simple qui soit et je voulais le 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; 
}
 

Answer 5

Si vous connaissez la hauteur de la div vous voulez center, vous pouvez la placer absolument dans son parent et puis définissez l' top valeur 50%. Qui va mettre le haut de l'enfant div à 50% du chemin vers le bas de son parent, c'est à dire trop faible. Le tirer en arrière par ses margin-top à la moitié de sa hauteur. Alors maintenant, vous avez la verticale du milieu de l'enfant div assis à la verticale du milieu de la société mère - centrée verticalement!

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