verticalement - css vertical align middle




Comment centrer verticalement un div pour tous les navigateurs? (20)

Je veux centrer un div verticalement avec CSS. Je ne veux pas de tables ou de JavaScript, mais seulement du CSS pur. J'ai trouvé quelques solutions, mais elles manquent toutes le support d'Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Comment puis-je centrer un div verticalement dans tous les principaux navigateurs, y compris Internet Explorer 6?


Centrage seulement verticalement

Si vous ne vous souciez pas d'Internet Explorer 6 et 7, vous pouvez utiliser une technique impliquant deux conteneurs.

Le conteneur externe:

  • devrait avoir display: table;

Le conteneur intérieur:

  • devrait avoir display: table-cell;
  • devrait avoir vertical-align: middle;

La boîte de contenu:

  • devrait avoir l' display: inline-block;

Vous pouvez ajouter n'importe quel contenu à la boîte de contenu sans vous préoccuper de sa largeur ou de sa hauteur!

Démonstration

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Voir aussi ce violon !

Centrage horizontalement et verticalement

Si vous souhaitez centrer horizontalement et verticalement, vous avez également besoin des éléments suivants.

Le conteneur intérieur:

  • devrait avoir text-align: center;

La boîte de contenu:

  • devrait réajuster l'alignement horizontal du texte par exemple text-align: left; ou text-align: right; , sauf si vous voulez que le texte soit centré

Démonstration

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Voir aussi ce violon !


Solution Flexbox

Remarques
1. L'élément parent reçoit le nom de la classe.
2. Ajoutez des préfixes de fournisseur flexibles si requis par vos navigateurs pris en charge .

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


C'est la méthode la plus simple que j'ai trouvée et je l'utilise tout le temps ( démo de jsFiddle ici )

Merci Chris Coyier de CSS Tricks pour cet article .

.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Le support commence par IE8.


C'est toujours là où je vais quand je dois revenir sur cette question .

Pour ceux qui ne veulent pas faire le saut:

  1. Spécifiez le conteneur parent comme position:relative ou position:absolute .
  2. Spécifiez une hauteur fixe sur le conteneur enfant.
  3. Définissez la position:absolute et top:50% sur le conteneur enfant pour déplacer le haut vers le milieu du parent.
  4. Définissez margin-top: -yy où yy correspond à la moitié de la hauteur du conteneur enfant pour décaler l'élément.

Un exemple de ceci dans le code:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Cette solution a fonctionné pour moi si vous avez un élément de bloc (par exemple). J'ai utilisé les couleurs pour rendre la solution plus claire.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddle Code Demo


En fait, vous avez besoin de deux div pour le centrage vertical. La div contenant le contenu doit avoir une largeur et une hauteur.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Voici le result


J'utilise ça. Cela fonctionne dans Internet Explorer 8 et plus tard:

height:268px - pour l' display:table agit comme min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

Je l'ai fait avec ceci (changer la largeur, la hauteur, la marge supérieure et la marge gauche en conséquence):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Je sais que les réponses sont déjà données, mais je pense que ce lien peut être utile pour l'alignement central dans tous les cas: howtocenterincss.com



La réponse de Billbad ne fonctionne qu'avec une largeur fixe du div. Cette solution fonctionne pour une largeur dynamique en ajoutant l'attribut text-align: center à la div .outer .

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>


La solution la plus simple est la suivante:

.outer-div{
  width: 100%;
  height: 100%;
  display: flex;
}
.inner-div{
  margin: auto;
}


Les trois lignes de code utilisant la transform fonctionnent pratiquement sur les navigateurs modernes et Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

J'ajoute cette réponse car j'ai trouvé un peu d'incomplétude dans la version précédente de cette réponse (et ne me permettra pas de commenter simplement).

  1. La 'position' relative perturbe le style si la div actuelle est dans le corps et n'a pas de conteneur div. Cependant 'fixed' semble fonctionner, mais il fixe évidemment le contenu au centre de la viewport

  2. J'ai aussi utilisé ce style pour centrer des divs overlay et j'ai trouvé que dans Mozilla tous les éléments à l'intérieur de ce div transformé avaient perdu leurs limites inférieures. Peut-être un problème de rendu. Mais ajouter juste le rembourrage minimal à certains d'entre eux l'a rendu correctement. Chrome et Internet Explorer (étonnamment) ont rendu les boîtes sans besoin de rembourrage


Malheureusement - mais ce n'est pas surprenant - la solution est plus compliquée qu'on ne le voudrait. Aussi, malheureusement, vous aurez besoin d'utiliser des divs supplémentaires autour de la div que vous voulez centrer verticalement.

Pour les navigateurs compatibles avec les standards tels que Mozilla, Opera, Safari, etc., vous devez définir la div externe à afficher sous forme de table et la div interne à afficher sous la forme d'une cellule de table qui peut ensuite être centrée verticalement. Pour Internet Explorer, vous devez positionner le div interne absolument dans le div externe et spécifier le top comme 50% . Les pages suivantes expliquent bien cette technique et fournissent aussi quelques exemples de code:

Il y a aussi une technique pour faire le centrage vertical en utilisant JavaScript. L'alignement vertical du contenu avec JavaScript et CSS le démontre.


Ne pas répondre à la compatibilité du navigateur mais mentionner également la nouvelle grille et la nouvelle fonctionnalité Flexbox.

la grille

De: Mozilla - Documentation de la grille - Aligner la division verticalement

Support du navigateur: Support du navigateur de grille

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Support du navigateur: Support du navigateur Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Si quelqu'un se soucie uniquement d'Internet Explorer 10 (et plus tard), utilisez flexbox :

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Support Flexbox: http://caniuse.com/flexbox


Surtout pour les divs parents avec une hauteur relative (inconnue), le centrage dans la solution inconnue fonctionne très bien pour moi. Il y a de très bons exemples de code dans l'article.

Il a été testé dans Chrome, Firefox, Opera et Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>


Une façon moderne de centrer un élément verticalement serait d'utiliser la flexbox .

Vous avez besoin d'un parent pour décider de la taille et d'un enfant pour centrer.

L'exemple ci-dessous va centrer un div au centre de votre navigateur. Ce qui est important (dans mon exemple) est de régler la height: 100% pour le body et le html , puis min-height: 100% pour votre conteneur.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>


Voici la meilleure solution complète que je pourrais construire pour centrer verticalement et horizontalement une boîte de contenu à hauteur fixe et flexible . Il a été testé et fonctionne pour les versions récentes de Firefox, Opera, Chrome et Safari.

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Voir un exemple de travail avec un contenu dynamique

J'ai construit un contenu dynamique pour tester la flexibilité et j'aimerais savoir si quelqu'un voit des problèmes avec elle. Il devrait aussi bien fonctionner pour les superpositions centrées - lightbox, pop-up, etc.





vertical-alignment