Question Comment centrer verticalement un div pour tous les navigateurs?


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?


1097
2017-12-28 12:57


origine


Réponses:


Voici la meilleure solution complète que je pourrais construire pour centrer verticalement et horizontalement une largeur fixe, hauteur flexible boîte de contenu 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.


1133
2018-05-31 03:13



Un de plus je ne peux pas voir 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!)
  • Réactif avec les pourcentages et min- / max-
  • Centré indépendamment du rembourrage (sans dimensionnement de boîte!)
  • height doit être déclaré (voir Hauteur variable)
  • Paramètre recommandé overflow: auto pour empêcher le débordement de contenu (voir Débordement de contenu)

La source: Centrage horizontal et vertical absolu en CSS


244
2017-08-13 03:08



Le moyen le plus simple serait le suivant 3 lignes de CSS:

position: relative;
top: 50%;
transform: 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>


163
2017-12-17 18:30



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 la résultat


126
2017-12-28 15:15



C'est la méthode la plus simple que j'ai trouvée et je l'utilise tout le temps (jsFiddle démo 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.


73
2018-02-20 21:05



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

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

49
2018-05-19 12:04



Pour centrer le div sur une page, vérifiez le lien du 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 une boîte flexible, vérifiez le lien du 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 une transformation CSS 3:

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


31
2017-08-13 04:06



Maintenant, la solution flexbox est un moyen très simple pour les navigateurs modernes, donc je recommande ceci pour vous:

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

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


30
2017-12-15 13:08



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


24
2018-03-30 01:30