web-dev-qa-db-fra.com

Using margin: auto pour aligner verticalement un div

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

Pourquoi vertical-align:middle; ne fonctionne-t-il 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

htmlcsscentering
85
savinger

Vous ne pouvez pas utiliser:

vertical-align:middle car c'est non applicable aux éléments de niveau bloc

margin-top:auto et margin-bottom:auto car leurs valeurs utilisées se calculent comme zéro

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

En fait, la nature des flux de documents et des algorithmes de calcul de hauteur d'élément rendent impossible l'utilisation de 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, un re-calcul de la hauteur de l'élément parent (re-flow) est déclenché, ce qui déclenche à son tour un recentrage de l'élément d'origine ... ce qui en fait 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 suit:

.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 bien selon Browsershot.

139
o.v.

Depuis que cette question a été posée en 2012 et que nous avons parcouru un long chemin avec le support des navigateurs pour les flexbox, je me suis dit que cette réponse était obligatoire.

Si l'affichage de votre conteneur parent est flex, alors yes, margin: auto auto (également appelé margin: auto) fonctionnera pour le centrer horizontalement et verticalement, qu'il s'agisse d'un élément inline ou 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 qu'il n'est pas nécessaire de spécifier absolument la largeur/hauteur, comme dans ce exemple jfiddle qui utilise le dimensionnement par rapport à la fenêtre d'affichage.

Bien que la prise en charge des flexbox par les navigateurs atteigne un niveau record au moment de la publication, de nombreux navigateurs ne les prennent toujours pas en charge ou exigent des préfixes de fournisseur. Reportez-vous à http://caniuse.com/flexbox pour obtenir des informations actualisées sur l’assistance du navigateur.

Mettre à jour

Étant donné que cette réponse a reçu un peu d'attention, j'aimerais également souligner qu'il n'est pas nécessaire de spécifier margin du tout si vous utilisez display: flex et 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>

74
zpr

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

Si vous avez un height (height: 1em, height: 50%, etc.) déclaré ou s'il s'agit d'un élément où le navigateur connaît la hauteur (par exemple, img, svg ou canvas), alors tout ce dont vous avez besoin pour le centrage vertical est le suivant:

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

En général, vous souhaiterez spécifier un width ou max-width afin que le contenu ne s'étire pas sur toute la longueur de l'écran/du conteneur.

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

Voici un texte plus complet: http://codepen.io/shshaw/pen/gEiDt

57
shshaw

Aucune des solutions de cette page ne fonctionne (pour moi).

Ma solution

Html

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

CSS

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

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; 
}
9
Paula Fleck

Si vous connaissez la hauteur de la div que vous souhaitez centrer, vous pouvez la positionner absolument dans son parent, puis définir la valeur top à 50%. Cela mettra le haut de l’enfant à 50% de son parent, c’est-à-dire trop bas. Redressez-le en réglant son margin-top à la moitié de sa hauteur. Alors maintenant, vous avez le milieu médian de la 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/

7
tuff

Ces deux solutions ne nécessitent que deux éléments imbriqués.
First - 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 la conception fluide - pour le centre de contenu exact, utilisez l'exemple ci-dessous à la place:

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

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

Vous devez définir "min-height" 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 les tablettes. Mais seulement si vous jouez avec un design réactif. 

Je suppose que vous pourriez aller plus loin et utiliser un simple script JavaScript/JQuery pour manipuler la hauteur minimale ou la hauteur fixe si une raison quelconque l'exigeait. 

Second - si le contenu est fluide, vous pouvez également utiliser les propriétés CSS de tableau et cellule-tableau avec alignement vertical et 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 évolue parfaitement, souvent utilisée comme solution de conception Web réactive avec des dispositions de grille et une requête multimédia qui manipule 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 la solution de table pour un centrage exact du contenu, mais dans certains cas, le positionnement absolu relatif sera plus efficace, en particulier si nous ne voulons pas conserver la proportion exacte d'alignement du contenu.

3
DevWL

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

1
Seetpal singh

Il n’existe pas de moyen facile de centrer verticalement div qui conviendrait 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: 20px 0px 20px 0px
  • Utiliser tableau, cellule de tableau centre son contenu verticalement
  • Définissez la position relative de l'élément parent et les div que vous souhaitez centrer verticalement en absolu et donnez-lui le style top: 50px; en bas: 50 px; par exemple

Vous pouvez également google pour "centrage vertical css"

0
hasu

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

0
user3668456

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

0
Daniel G. Blázquez