Comment centrer verticalement un div pour tous les navigateurs?

https://stackoverflow.com/questions/396145

29-08-2019
|

Question

Je veux centrer un div verticalement avec CSS. Je ne veux pas les tables ou JavaScript, mais seulement CSS pur. J'ai trouvé quelques solutions, mais elles sont toutes manque soutenir 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?

La solution

Ci-dessous, est la meilleure solution tout autour je puisse construire à la verticale et centrer horizontalement une largeur fixe, hauteur souple boîte de contenu. Il a été testé et fonctionnel pour les versions récentes de Firefox, Opera, Chrome et Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  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 contenu dynamique

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

Autres conseils

Un plus je ne vois pas sur la liste:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

Cross-navigateur (y compris Internet Explorer 8 - Internet Explorer 10 sans hacks)
Responsive avec des pourcentages et min- / max -
Centré quel que soit le rembourrage (sans boîte taille!)
height doit être déclarée (voir variable Hauteur )
Réglage recommandé overflow: auto pour éviter le contenu débordement (voir Overflow)

_{Source: absolue horizontale et verticale Centrage En CSS}

La façon la plus simple serait les lignes suivantes 3 de CSS:

1) position: relative;

2) supérieure: 50%;

3) transformer: translateY (-50%);

Voici un Exemple :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

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

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

En fait, vous avez besoin de deux div est pour le centrage vertical. Le div contenant le contenu doit avoir une largeur et la 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 résultat

Maintenant, la solution est FlexBox un moyen très facile pour les navigateurs modernes, donc je vous recommande pour vous:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

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

Merci Chris Coyier de Tricks CSS pour cet article .

html, body{
  height: 100%;
  margin: 0;
}
.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>

Support commence par IE8.

Après beaucoup de recherches, j'ai finalement trouvé la solution ultime. Il fonctionne même pour les éléments flottants. Afficher la source

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Pour centrer la div sur une page, vérifier le lien violon .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Une autre option consiste à utiliser la boîte flex, vérifier le lien violon .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Une autre option consiste à utiliser un CSS 3 transform:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

solution Flexbox

Remarques 1. L'élément parent reçoit le nom de la classe.
2. Ajouter flex préfixes fournisseurs si nécessaire par votre navigateurs pris en charge .

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

Malheureusement - mais sans surprise - la solution est plus compliquée qu'on ne le souhaitent être. Aussi, malheureusement, vous aurez besoin d'utiliser divs supplémentaires autour de la div que vous voulez centré verticalement.

Pour navigateurs conformes aux standards tels que Mozilla, Opera, Safari, etc. vous devez définir la div externe à afficher comme Tableau et la div intérieure à afficher comme Tableau -Cell - qui peut ensuite être centrée verticalement. Pour Internet Explorer, vous devez Position div intérieur absolument dans le div externe puis spécifiez le top 50% . Les pages suivantes expliquent bien cette technique et de fournir aussi des exemples de code:

vertical en CSS Centrage
~~verticale centrage en CSS avec Hauteur Unknown (Internet Explorer 7 compatible)~~ (plus direct)
verticale centrage en CSS avec hauteur Unknown (Internet Explorer 7 compatible) (article archivé avec la permission de la Wayback machine)

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

Si quelqu'un prend soin de Internet Explorer 10 (et versions ultérieures), recourez 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

La solution est plus facile ci-dessous:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Une façon moderne pour centrer un élément serait verticalement à utiliser flexbox.

Vous avez besoin d'un parent de décider de la hauteur et un enfant au centre.

L'exemple ci-dessous un centre div au centre de votre navigateur. Ce qui est important (dans mon exemple) est de mettre height: 100% à body et html puis min-height: 100% à 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>

Centrer seulement verticalement

Si vous ne vous souciez pas sur Internet Explorer 6 et 7, vous pouvez utiliser une technique qui implique deux conteneurs.

Le récipient externe:

devrait avoir display: table;

Le récipient interne:

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

La boîte de contenu:

devrait avoir display: inline-block;

Vous pouvez ajouter tout le contenu que vous voulez la zone de contenu sans se soucier de sa largeur ou de la hauteur!

Démo:

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 Fiddle !

Centrer horizontalement et verticalement

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

Le récipient interne:

devrait avoir text-align: center;

La boîte de contenu:

doit réajuster l'horizontale du texte à l'alignement par exemple text-align: left; ou text-align: right;, à moins que vous voulez que le texte soit centré

Démo:

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 Fiddle !

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Related: Centre d'une image

est toujours là où je vais quand je dois revenir noreferrer"> cette question

Je viens d'écrire ce CSS et pour en savoir plus, s'il vous plaît passer par: Cet article vERTICAL aligner quelque chose avec seulement 3 lignes de CSS .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Utiliser la propriété flex de CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

ou en utilisant display: flex; et margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Centre d'exposition de texte

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Utilisation de pourcentage (%) hauteur et la largeur.

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

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

.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>

Le lien suivant présente une façon simple de le faire avec seulement trois lignes dans votre CSS:

vertical quoi que ce soit aligner avec seulement 3 lignes de CSS .

Crédits à . Sebastian Ekström

Je sais que la question a déjà une réponse mais j'ai vu l'utilité dans le lien pour sa simplicité.

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

Grille

De: Mozilla - Documentation Grille - Aligner Div verticalement

Support du navigateur: Browser Support 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: ēno Support du navigateur

CSS:

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

Les trois lignes de code à l'aide transform fonctionne 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 que je trouve un peu incomplétude dans la version précédente de cette réponse (et le débordement de pile ne me permet pas simplement un commentaire).

« position » mess relative jusqu'à la coiffants si la div de courant est dans le corps et n'a pas de div conteneur. Cependant « fixe » semble fonctionner, mais il fixe évidemment le contenu au centre de la fenêtre
Aussi j'utilisé ce style pour le centrage des divs de recouvrement et a constaté que dans Mozilla tous les éléments à l'intérieur de cette div transformé avaient perdu leurs frontières en bas. Peut-être un problème de rendu. Mais en ajoutant juste le rembourrage minimal pour certains d'entre eux a rendu correctement. Chrome et Internet Explorer (étonnamment) a rendu les cases sans avoir besoin de rembourrage

Je pense que d'une solution solide pour tous les navigateurs sans utiliser FlexBox - "align-éléments: center;" est une combinaison de l'affichage: table et vertical-align:. milieu;

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣demo: https://jsfiddle.net/6m640rpp/

CSS Grille

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

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

Je l'ai fait avec cette (largeur de changement, 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>

En particulier pour les divs mères avec une hauteur relative (inconnu), le de centrage dans l'inconnu solution fonctionne très bien pour moi. Il y a quelques exemples de code vraiment sympa 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>

Il y a un truc que j'ai découvert récemment: Vous devez utiliser top 50% et puis vous faites un translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Pour les nouveaux venus essayer s'il vous plaît

display: flex;
align-items: center;
justify-content: center;

Je trouve cela plus utile .. il donne la mise en page la plus précise « H » et est très simple à comprendre.

L'avantage de ce balisage est que vous définissez votre taille de contenu dans un seul endroit -> « PageContent ».
Les couleurs de l'arrière-plan de la page et de ses marges horizontales sont définies dans leurs divs correspondantes.

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

Et ici avec CSS séparé:

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

Le contenu peut être facilement centrée en utilisant FlexBox. Le code suivant montre le CSS pour le conteneur à l'intérieur duquel le contenu doit être centré sur:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow