CSS Margin effondrement en utilisant la marge: auto;

Question

J'ai cherché sur Stackoverflow si de nombreux messages, mais je n'ai pas trouvé la solution. J'essaie d'aligner mon texte verticalement, en utilisant margin: auto;

Il semble qu'il y ait une marge problème s'effondrer, si vous voulez vérifier cet exemple:

// HTML 
<div class="outer"> 
    <div class="inner">Hello</div> 
</div> 

<div class="outer2"> 
    <div class="inner">Trying to center this text vertically</div> 
</div> 

// CSS 
.inner { 
    margin: auto 0; 
    height: 20px; 
    color: white; 
} 
.outer { 
    background-color: red; 
} 
.outer2 { 
    background-color: blue; 
    height: 200px; 
} 

If you want to play on my code, click here

Answer 1

Je ne crois pas qu'il y ait une bonne façon d'aligner verticalement le contenu en utilisant margin: auto 0 comme vous » Je l'ai mis en place. Pour obtenir les inner divs centré verticalement, voici un moyen simple en modifiant .inner:

.inner { 
    height: 200px; 
    color: white; 
    line-height: 200px; 
} 

Answer 2

Je vous conseille d'utiliser FlexBox ajouter ce à outer2 classe

.outer2 { 
    background-color: blue; 
    height: 200px; 
    display:flex; 
    align-items:center; 
} 

Et pour align horizontal vous pouvez utiliser justify-content:center align-item:center alignera les éléments au centre de div verticalement,

Answer 3

L'affichage fait la magie. Affichage: table-cellule sur intérieure et affichage: table sur div externe. Et enfin sur div interne vous mettez vertical-aligner: milieu ou n'importe quelle position que vous voulez.

.inner { 
     display: table-cell; 
     vertical-align: middle; 
     height: 20px; 
     color: white; 
    } 
    .outer2 { 
     text-align: center; 
     background-color: blue; 
     height: 200px; 
     display: table; 
     width: 100%; 
    } 

Answer 4

.outer2 { 
    display: flex; 
    justify-content: center, left; 
    background-color: blue; 
    height: 200px; 
} 

Answer 5

que vous essayez d'aligner l'ensemble div intérieure en donnant margin: auto. Vous pouvez utiliser text-align: center si vous souhaitez aligner le texte. Si vous devez aligner le div entier, mentionnez la hauteur et la largeur pour div interne. J'ai posté lien violon s'il vous plaît vérifier

http://jsfiddle.net/ajaycoder/n1rz0bts/4/

.inner { 
    margin: auto ; 

    color: white; 
    width:50%; 
    border: solid 1px red; 
    height:50%; 
}