Comment centrer verticalement une div pour tous les navigateurs?

1368

Je veux centrer un divverticalement avec CSS. Je ne veux pas de tables ou de JavaScript, mais uniquement du CSS pur. J'ai trouvé quelques solutions, mais elles ne prennent pas toutes en charge Internet Explorer 6.

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

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

css cross-browser alignment vertical-alignment centering

— Burak Erdem
source

25

@MarcoDemaio Les gens ne désapprouvent-ils pas constamment les tablesmises en page ici?

— Chud37

14

@ Chud37: cela dépend de ce que vous avez à faire, les tableaux de disposition ne sont généralement pas polyvalents et longs à taper du code, avec css vous pouvez facilement changer une disposition à 2 cols en une disposition 3/4/5 sols, etc. Mais dans ce cas est différent, utiliser des dizaines de trucs et astuces css pour une tâche aussi simple qui pourrait être accomplie avec une table de navigateur parfaite, c'est comme essayer d'entrer dans votre maison par la fenêtre au lieu d'utiliser la porte.

— Marco Demaio

Dans le cas où les gens ne se soucient pas de la prise en charge d'un navigateur plus ancien: davidwalsh.name/css-vertical-center

— Karolis Šarapnickis

1

css-vertical-center.com il existe des solutions avec des informations de compatibilité du navigateur

— EscapeNetscape

2

Voici de nombreuses façons de le faire css-tricks.com/centering-css-complete-guide

— Michael Yurin

Réponses:

1375

Vous trouverez ci-dessous la meilleure solution globale que je pourrais construire pour centrer verticalement et horizontalement une zone de contenu à largeur fixe et à hauteur flexible . Il a été testé et fonctionne 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>

Développer l'extrait

Afficher un exemple de travail avec du contenu dynamique

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

— Billbad
source

Sans DIV externe "absolu", tout contenu sur la page avant qu'il ne pousse le bloc entier vers le bas. Cela le rend plus indépendant des autres contenus de page.

— Billbad du

9

.outer {position:absolute;width:100%;height:100%}n'est pas nécessaire, ils sont là simplement pour manifester. Tout ce dont nous avons besoin est display:table, si quelqu'un est confus comme moi.

— gfaceless

J'ai remarqué qu'il fallait 99% pour éviter les barres de défilement. Plus important encore, cela ne fonctionne qu'avec les deux premières divisions, par exemple, gardez .outeret middleignorez clairement le .inneret son style. Je ne sais pas à quoi ça sert margin-left, margin-rightréglé sur auto car cela ne centre pas l'élément horizontalement ?? !!!

— user10089632

La suppression width: 100%;et l'ajout margin: 0 autoà .outerpermettent également une largeur variable.

— rococo

@ user10089632 Non, ce n'est pas une question de largeur ou de hauteur mais de position. top: 0; left 0;est manquant, au moins dans Chrome qui définit la valeur par défaut à 1.

— Michał Woliński

280

Un autre que 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-browser (y compris Internet Explorer 8 - Internet Explorer 10 sans hacks!)
Adapté aux pourcentages et min- / max-
Centré indépendamment du rembourrage (sans dimensionnement de boîte!)
heightdoit être déclaré (voir Hauteur variable )
Paramètre recommandé overflow: autopour éviter le débordement de contenu (voir Débordement)

_{Source: Centrage absolu horizontal et vertical en CSS}

— Yisela
source

7

Cela a fonctionné pour moi, mais je devais avoir une largeur et une hauteur fixes en chrome pour une raison quelconque

— Ryan Knell

1

Je vous remercie. J'avais besoin d'une correction où je n'avais pas besoin de calculer la hauteur ou la largeur des px et cela fonctionnait parfaitement.

— GFoley83

8

Excellente solution, surtout parce que vous n'avez pas besoin d'un parent div

— Luca Steeb

1

Cela fait un étirement si la hauteur n'est pas fixe, à part ça: belle solution

— Bart Burg

Si vous avez une largeur et une hauteur qui ne sont pas à 100%, utilisezmargin: auto;

— Charles L.

253

Le moyen le plus simple serait les 3 lignes de CSS suivantes:

1) position: relative;

2) haut: 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>

Développer l'extrait

— DrupalFever
source

4

note: ne fonctionne pas correctement si la hauteur de la div externe est définie avec "min-height: 170px"

— Bart Burg

3

Interfère avec z-index

— ripper234

4

ne fonctionne pas lorsque l' heightextérieur divest 100%. Ne fonctionne alors qu'avec position: absolute;.

— Arch Linux Tux

1

J'avais d'abord trouvé cette solution ailleurs, mais bravo à cette réponse particulière pour avoir mentionné la -webkit-transformvariante en particulier, dont j'avais besoin pour faire fonctionner cette méthode dans les fantômes ... terminé des heures de lutte alors merci!

— drmrbrewer

2

C'est la meilleure réponse. C'est incroyablement simple, il gâche le moins de travail existant et fonctionne sur tout depuis IE9 que personne n'utilise même plus. Permet d'obtenir à ce gars quelques votes supplémentaires!

— Nick Steele

136

En fait, vous avez besoin de deux div pour le centrage vertical. Le 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>

Développer l'extrait

Voici le résultat

— Vadim Ovchinnikov
source

4

c'est une vieille astuce ... top 50% et la marge supérieure négative de la moitié de la hauteur pour le div intérieur

— Manatax

34

c'est en supposant que vous avez une hauteur fixe pour div. ne fonctionne pas lorsque div peut changer de hauteur.

— Andre Figueiredo

116

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

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

Développer l'extrait

— Santosh Khalse
source

1

Si vous en avez un navbar, vous pouvez modifier la hauteur en utilisant height: calc(100% - 55px)ou quelle que soit la hauteur de votre taille navbar.

— Adrian

j'ai aussi dû enlever les marges / rembourrage du corps

— Ben

Fonctionne bien avec float. Merci.

— Amir A. Shabani

Veuillez noter que cela se comportera potentiellement de manière étrange sur les navigateurs de safari mobiles "plus récents et plus anciens". L'utilisation recommandée au lieu de la hauteur est flex-based sur la classe .container

— Nine Magics

78

Edit 2020: utilisez-le uniquement si vous devez prendre en charge d'anciens navigateurs comme IE8 (ce que vous devriez refuser de faire 😉). Sinon, utilisez flexbox.

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

Merci Chris Coyier de CSS Tricks 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>

Développer l'extrait

Le support commence par IE8.

— Armel Larcier
source

Refusant la prise en charge des anciens navigateurs, la solution pour moi n'était pas la flexbox mais le système de grille. C'était un peu ennuyeux pour moi de centrer le contenu dans un conteneur qui, lorsqu'il devenait trop petit en hauteur, devait afficher la barre de défilement, et le contenu centré perdait la zone de défilement avec toutes les autres méthodes. Dans le conteneur, j'utilise simplement: {display: grid; align-items: centre; } J'espère que cela aide quelqu'un.

— tomasofen

63

Après de nombreuses 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% */
}

— ymakux
source

4

Cela fonctionne très bien, à condition de vous souvenir que l'élément conteneur doit avoir une hauteur implicite ou explicite; jsfiddle.net/14kt53un Un piège mineur pour ceux qui sont relativement nouveaux en CSS.

— Martyn Shutt

6

De toutes les réponses, c'est la plus simple! J'espère que les autres verront aussi votre réponse! Je vous remercie! Soit dit en passant, a 50%travaillé pour moi (pas -50%)

— The Codesee

C'était incroyable. Après des heures de recherche, celui-ci a fonctionné pour moi. J'ai dû utiliser translateY (50%), je sais pourquoi, mais cela a fonctionné. Dans mon cas, le parent a été créé par AEM Forms Engine et je ne peux contrôler que certains éléments enfants.

— tarekahf

41

Solution Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Développer l'extrait

— Reggie Pinkham
source

3

La note justify-content: centercentrera également les éléments horizontalement

— Peter Berg

36

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>

Développer l'extrait

Une autre option consiste à utiliser la 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>

Développer l'extrait

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>

Développer l'extrait

— Nerdroid
source

3

@ArmelLarcier C'est incorrect. Les unités relatives sont les pourcentages %, ems et rems. Les valeurs absolues ou fixes sont des pixels ou des points. Vous faites référence à "cela ne fonctionne qu'avec une hauteur déclarée". Cependant, bien que cette méthode décrite par Moes nécessite une hauteur, lorsque vous la déclarez en unités relatives, le pourcentage est le meilleur, peu importe la quantité de contenu à l'intérieur de la DIV centrée que DIV étendra verticalement pour s'adapter à son contenu. Voilà la beauté de cette méthode. L'autre bonne chose est que cette méthode fonctionne dans IE8 / 9/10 au cas où quelqu'un aurait encore besoin de supporter ces navigateurs.

— Ricardo Zea

@ricardozea Je ne veux pas jouer têtu mais dire que le div centré se développera verticalement tout en restant centré verticalement est faux. Essayez-le. Je sais quand je dis que la hauteur doit être "fixe", que ce n'est pas le bon mot. Il est en effet relatif, par rapport à son parent. Quoi qu'il en soit, je pense que la méthode de Chris Coyer est plus logique, voir ma réponse stackoverflow.com/a/21919578/1491212 Il est compatible avec IE8 ET fonctionne sur un élément sans dimensions spécifiées.

— Armel Larcier

1

@ArmelLarcier Tout va bien. N'est-ce pas faux frère. Essayez-le: codepen.io/shshaw/pen/gEiDt - Ajoutez des paragraphes à la boîte verte;]. Certes, il utilise Modernizr pour accomplir l'effet, mais dans l'ensemble, c'est faisable. J'ai vu votre réponse et le post CSS-Tricks.com également, mais cette méthode ne me fait pas plaisir, elle utilise un balisage supplémentaire et le CSS est trop verbeux. Je pense que la meilleure solution est d'utiliser la flexbox ou la transform: translate(-50%, -50%);technique. Pour IE8, je le laisserais juste aligné haut / centre et continuerais.

— Ricardo Zea

1

@ricardozea Eh bien, le codepen auquel vous avez lié utilise la méthode "display: table" et un balisage supplémentaire, donc je ne suis pas surpris. Quoi qu'il en soit, +1 à votre dernière phrase.

— Armel Larcier

23

La solution la plus simple est 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>

Développer l'extrait

— Varsha Dhadge
source

2

En effet, le plus simple à ce jour :) Bien que, j'ai dû définir les styles sur une div externe, au lieu du corps.

— baburao

21

Malheureusement - mais sans surprise - la solution est plus compliquée qu'on ne le souhaiterait. Malheureusement, vous devrez également utiliser des divs supplémentaires autour du div que vous souhaitez centré verticalement.

Pour les navigateurs conformes aux normes comme Mozilla, Opera, Safari, etc., vous devez définir le div externe à afficher sous forme de tableau et le div interne à afficher sous forme de cellule de tableau - qui peut ensuite être centré verticalement. Pour Internet Explorer, vous devez positionner le div intérieur absolument à l'intérieur du div extérieur, puis spécifier le haut à 50% . Les pages suivantes expliquent bien cette technique et fournissent également quelques exemples de code:

Centrage vertical en CSS
~~Centrage vertical en CSS de hauteur inconnue (compatible avec Internet Explorer 7)~~ (n'est plus disponible)
Centrage vertical en CSS de hauteur inconnue (compatible avec Internet Explorer 7) (article archivé avec l'aimable autorisation de Wayback Machine)

Il existe également une technique pour effectuer le centrage vertical en utilisant JavaScript. L'alignement vertical du contenu avec JavaScript et CSS le démontre.

— sids
source

20

Si quelqu'un se soucie d'Internet Explorer 10 (et versions ultérieures) uniquement, 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>

Développer l'extrait

Prise en charge de Flexbox: http://caniuse.com/flexbox

— bravedick
source

Android <4.4 ne prend pas en charge align-items: center;!

— André Fiedler

En fait, il prend en charge align-items: center; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d Vous voudrez peut-être regarder de plus près ce tableau. Pour Android <4.4, il indique "Prend uniquement en charge l'ancienne spécification flexbox et ne prend pas en charge le wrapping".

— Nathan Osman

15

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

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

L'exemple ci-dessous centre un div au centre de votre navigateur. Ce qui est important (dans mon exemple) est de mettre height: 100%à bodyet htmlpuis min-height: 100%à votre récipient.

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>

Développer l'extrait

— Marwelln
source

14

Centrage uniquement verticalement

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

Le conteneur extérieur:

avoir dû display: table;

Le récipient intérieur:

avoir dû display: table-cell;
avoir dû vertical-align: middle;

La zone de contenu:

avoir dû display: inline-block;

Vous pouvez ajouter n'importe quel contenu que vous souhaitez dans la zone de contenu sans vous soucier de sa largeur ou de sa 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>

Développer l'extrait

Voir aussi ce violon !

Centrage horizontal et vertical

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

Le récipient intérieur:

avoir dû text-align: center;

La zone 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é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>

Développer l'extrait

Voir aussi ce violon !

— John Slegers
source

13

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

Développer l'extrait

Connexes: Centrer une image

— antelove
source

10

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

Pour ceux qui ne veulent pas faire le saut:

Spécifiez le conteneur parent comme position:relativeou position:absolute.
Spécifiez une hauteur fixe sur le conteneur enfant.
Définissez position:absoluteet top:50%sur le conteneur enfant pour déplacer le haut vers le bas au milieu du parent.
Définissez margin-top: -yy où yy représente la moitié de la hauteur du conteneur enfant pour décaler l'élément vers le haut.

Un exemple de cela 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>

— Ninx
source

9

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

Développer l'extrait

ou en utilisant display: flex;etmargin: auto;

Afficher l'extrait de code

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

Développer l'extrait

afficher le centre de texte

Afficher l'extrait de code

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

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

Développer l'extrait

Utilisation du pourcentage (%) de hauteur et de largeur.

Afficher l'extrait de code

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

Développer l'extrait

— Deepu Reghunath
source

8

Je viens d'écrire ce CSS et pour en savoir plus, veuillez consulter: Cet article avec vertical aligner quoi que ce soit avec seulement 3 lignes de CSS .

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

— Sanjib Debnath
source

1

Les transformations CSS peuvent provoquer des distorsions dans le texte et les bordures (lorsque les calculs résultent en pixels fractionnaires).

— Nathan K

5

Grille CSS

body, html { margin: 0; }

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

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

Développer l'extrait

— Andy Hoffman
source

5

Pour les nouveaux arrivants, veuillez essayer

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

— Usman I
source

1

Veuillez ajouter un extrait de pile montrant comment ce code CSS aligne verticalement a div.

— Heretic Monkey

cela fonctionne aussi <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

Je suis tombé sur cette merveilleuse explication de l'alignement des éléments et de la justification du contenu. À lire absolument

— Usman I

4

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

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

Développer l'extrait

— Ruwen
source

Intéressant! J'utilise une technique presque identique! -> stackoverflow.com/questions/396145/…

— John Slegers

4

Les trois lignes de code utilisant des transformtravaux 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é une incomplétude dans la version précédente de cette réponse (et Stack Overflow ne me permettra pas de simplement commenter).

'position' relative perturbe le style si le div actuel est dans le corps et n'a pas de div de conteneur. Cependant «fixe» semble fonctionner, mais il corrige évidemment le contenu au centre de la fenêtre
J'ai également utilisé ce style pour centrer certaines divisions de superposition et j'ai constaté que dans Mozilla, tous les éléments à l'intérieur de cette division transformée avaient perdu leurs bordures inférieures. Peut-être un problème de rendu. Mais l'ajout d'un rembourrage minimal à certains d'entre eux l'a rendu correctement. Chrome et Internet Explorer (étonnamment) ont rendu les boîtes sans besoin de rembourrage

— MandarK
source

3

Le lien suivant présente une manière simple de le faire avec seulement 3 lignes dans votre CSS:

Alignez verticalement n'importe quoi 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é du lien pour sa simplicité.

— Hicaro
source

3

Ne répond pas pour la compatibilité du navigateur mais aussi pour mentionner la nouvelle grille et la fonctionnalité Flexbox pas si nouvelle.

la grille

De: Mozilla - Grid Documentation - Align Div Vertically

Prise en charge du navigateur: prise en charge 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

Prise en charge du navigateur: prise en charge du navigateur Flexbox

CSS:

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

— ctekk
source

3

Je pense qu'une solution solide pour tous les navigateurs sans utiliser flexbox - "align-items: center;" est une combinaison d'affichage: table et d'alignement vertical: 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/

— Martin Wantke
source

2

Je l'ai fait avec cela (changez la largeur, la hauteur, la marge en haut et la marge en 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>

— Netuddki
source

Ce n'est bon que si vous connaissez la largeur / hauteur du DIV que vous essayez de centrer. Ce n'est pas ce que la question demande

— egr103

2

Le contenu peut être facilement centré à l'aide de flexbox. Le code suivant montre le CSS du conteneur à l'intérieur duquel le contenu doit être centré:

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

— Mahendra Liya
source

2

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>

Développer l'extrait

— Ruwen
source

2

Faites-le div: ajoutez le cours à votre :

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Et lisez cet article pour une explication. Remarque: Heightest nécessaire.

— Anshul
source

2

Il y a un truc que j'ai découvert récemment: vous devez utiliser top 50%et ensuite voustranslateY(-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>

Développer l'extrait

— Melchia
source

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.

Licensed under cc by-sa 3.0 with attribution required.