Comment verticalement centre d'une div pour tous les navigateurs?

Je veux un centre de div verticalement avec les CSS. Je ne veux pas de tables ou de JavaScript, mais seulement pur CSS. J'ai trouvé quelques solutions, mais ils manquent d'Internet Explorer 6 prise en charge.

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

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

Ne pas les gens en permanence à froncer les sourcils sur tables pour la mise en page ici?
cela dépend de ce que vous avez à faire, des tables pour la mise en page sont généralement pas polyvalent et long à taper dans le code, avec les css, vous pouvez modifier facilement un 2 cols de mise en page dans un 3/4/5 sols de la mise en page etc. Mais dans ce cas est différent, à l'aide de dizaines de css astuces-et-trucs pour exemple une tâche simple qui peut être accompli grâce à une parfaite croix-navigateur de table, c'est comme d'essayer d'entrer dans votre maison par la fenêtre au lieu d'utiliser la porte.
Dans le cas où les gens ne se soucient pas des plus âgés prise en charge du navigateur: davidwalsh.nom/css-verticale-centre
Parce que l'utilisation de tables avec valign ne fonctionne pas? 🙂
La manière moderne de faire.
css-vertical-center.com il y a des solutions avec la compatibilité du navigateur de l'information
Ici est beaucoup de façons de le faire css-tricks.com/centering-css-complete-guide

InformationsquelleAutor Burak Erdem | 2008-12-28

1292

Ci-dessous est la meilleure solution que j'ai pu construire à la verticale et à l'horizontale centre d'une largeur fixe, flexible hauteur contenu de la boîte. Il a été testé et de travail pour les versions récentes de Firefox, Opéra, Chrome et Safari.

CSS:
```
.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*/
}
```
HTML:
```
<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 Du Contenu Dynamique

J'ai construit dans une certaine dynamique de contenu pour tester la souplesse et aimerais savoir si quelqu'un voit pas de problèmes avec elle. Il devrait bien fonctionner pour l'centrée sur les superpositions d' -- lightbox, pop-up, etc.
- Sans un "absolu" DIV extérieure, tout le contenu de la page avant de pousser le bloc vers le bas. Cela le rend plus indépendant des autres le contenu de la page.
- .outer {position:absolute;width:100%;height:100%} n'est pas nécessaire, ils sont ici tout simplement pour démontrer. Tous nous avons besoin est display:table, si quelqu'un est confus comme je l'ai été.
- J'ai remarqué que c'besoins de 99% pour éviter les barres de défilement. Plus important, cela fonctionne uniquement avec les deux premiers de la vrd, dire garder .outer et middle et simplement ignorer les .inneret son style. Je ne sais pas quel est le point de margin-left, margin-right réglé sur auto qui n'est pas le centre de l'élément à l'horizontale??!!!
- Retrait width: 100%; et l'ajout de margin: 0 auto à .outer permet de varier la largeur ainsi.
- Non, il n'est pas question de la largeur ou de la hauteur, mais la position. top: 0; left 0; est manquant, au moins en Chrome qui définit par défaut à 1.
InformationsquelleAutor Billbad
263

Un de 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;
}
```
- De la croix-navigateur (y compris Internet Explorer 8 - Internet Explorer 10 sans hacks!)
- Réactif avec les pourcentages et les min-/max-
- Centrée indépendamment de rembourrage (sans box-sizing!)
- height doit être déclarée (voir Hauteur Variable)
- Paramètre recommandé overflow: auto pour empêcher le contenu de contagion (voir Débordement)
_{Source: Absolue le Centrage Horizontal Et Vertical En CSS}
- Cela a fonctionné pour moi, mais j'avais besoin d'avoir un fixe la largeur et la hauteur en chrome pour une raison quelconque
- Je vous remercie. J'ai besoin d'un correctif où je n'ai pas besoin de calculer px de hauteur ou de largeur et cela a fonctionné parfaitement.
- Excellente solution, en particulier parce que vous n'avez pas besoin d'un div parent
- Ce qui fait un étirement si la hauteur n'est pas fixe, autres que: solution sympa
- Si vous avez une largeur et une hauteur qui ne sont pas à 100%, l'utilisation margin: auto;
- Pourquoi cet échec lorsque l'un des paramètres de position ne sont pas 0. Par exemple, si le haut est de 30%.
- Étrange, j'ai essayé cela avec une barre de progression et le mettre en haut de la page, au-dessus de mon menu.
- si le travail de mise à jour le vérifier, sinon vérifier le lien fourni pour full css.
- sauf si vous définissez la position=relative pour l'élément body, alors oui, vous avez besoin d'un parent pour définir qu'à elle.
InformationsquelleAutor Yisela
208

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

1) position: relative;

2) top: 50%;

3) transformer: translateY(-50%);

Qui suit est un EXEMPLE:

CSS:
```
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%);
}
```
HTML:
```
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
```
- remarque: ne fonctionne pas correcte si la hauteur de la div extérieure est définie avec "min-height: 170px"
- Interfère avec le z-index
- Ne pas fonctionner si le contenu a float.
- ne fonctionne pas quand height de l' div est 100%. Alors ne fonctionne qu'avec position: absolute;.
- J'avais trouvé cette solution d'ailleurs en premier, mais bravo pour cette réponse particulière pour la mention de la -webkit-transform variante en particulier, dont j'avais besoin pour rendre cette méthode de travail dans phantomjs... fini les heures de galère, donc je vous remercie!
- C'est la meilleure réponse. C'est incroyablement simple, les dégâts avec le moins de travail existant et de fonctions sur tout, aussi loin que IE9 qui personne n'utilise même plus. Permet d'obtenir ce mec un peu plus upvotes!
- Certainement le meilleur et le navigateur "safe" approche!
InformationsquelleAutor DrupalFever
133

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

CSS:
```
#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;
}
```
HTML:
```
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
```
Ici est la résultat
- Merci!!! A travaillé pour moi. Pouvez-vous expliquer un peu comment vous est venu avec elle?
- c'est un vieux truc... en haut de 50% et la marge supérieure négatif de la moitié de la hauteur à l'intérieur de la div
- c'est en supposant que vous avez une hauteur fixe pour la div. ne fonctionne pas quand div pouvez changer la hauteur.
- j'ai compilé une liste de tous les moyens qui sont utiles..jsfiddle.net/k6ShD/4
InformationsquelleAutor
84

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

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

body, html{
  height:100%;
}
```
HTML:
```
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
```
- a fonctionné pour moi sans height:100%; merci
- Si vous avez un navbar, vous pouvez modifier la hauteur à l'aide height: calc(100% - 55px) ou quelle que soit la hauteur de votre navbar est.
- j'ai également eu à supprimer des marges/rembourrage du corps
InformationsquelleAutor Santosh Khalse

C'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 CSS Astuces pour cet article.

CSS:

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

HTML:

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Soutien commence avec IE8.

InformationsquelleAutor Armel Larcier

57

Après beaucoup de recherche j'ai enfin trouvé la solution ultime. Il fonctionne même pour les flottait éléments. L'Affichage De La Source
```
.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
```
- Cela ne fonctionne vraiment bien, à condition de se rappeler que l'élément conteneur doit avoir un implicite ou explicite de la hauteur; jsfiddle.net/14kt53un Un mineur gotcha pour ceux qui sont relativement nouveaux pour CSS.
- De toutes les réponses, c'est le plus simple! J'espère que d'autres de voir votre réponse aussi! Merci!!!! Par la voie, 50% a fonctionné pour moi (pas -50%)
- cette seulement travaillé avec position:absolute pour moi.
InformationsquelleAutor ymakux
33

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

CSS:
```
#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;
}
```
HTML:
```
<div id="vh" class="box">Div to be aligned vertically</div>
```
Une autre option est d'utiliser flex zone, vérifier le violon lien.

CSS:
```
.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
```
HTML:
```
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>
```
Une autre option est d'utiliser un CSS 3 transform:

CSS:
```
#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;
}
```
HTML:
```
<div id="vh" class="box">Div to be aligned vertically</div>
```
- C'est incorrect. Les unités relatives sont des pourcentages %, ems et rems. Dans l'absolu ou fixe des valeurs de pixels ou de points. Ce que vous faites allusion à l'est ", il ne fonctionne qu'avec une déclaration de hauteur". Howevever, bien que cette méthode décrite par Moe nécessite une certaine hauteur, lorsque vous déclarez qu'il en unités relatives, le pourcentage est le meilleur, peu importe combien le contenu est centré à l'intérieur de la DIV DIV verticalement pour s'adapter à son contenu. C'est la beauté de cette méthode. L'autre bonne chose est que cette méthode fonctionne dans IE8/9/10 dans le cas où quelqu'un l'a encore besoin à l'appui de ces navigateurs.
- Je ne veux pas jouer têtu mais en disant la div centré verticalement tout en restant centrée verticalement est faux. Essayez-la. Je sais que quand je dis que la hauteur doit être "fixe", que ce n'est pas le bon mot. C'est en effet par rapport à son parent. De toute façon je pense que Chris Coyer la méthode a plus de sens, voir ma réponse stackoverflow.com/a/21919578/1491212 Il est compatible avec IE8 ET ne travailler sur un élément sans dimensions spécifiées.
- C'est du tout bon. N'est pas faux frère. Essayez-la: codepen.io/shshaw/stylo/gEiDt - Ajouter des paragraphes de la boîte verte ;]. Accordé, il utilise Modernizr pour accomplir l'effet, mais dans l'ensemble c'est faisable. J'ai vu votre réponse, et la CSS-Tricks.com poste en tant que bien, mais cette méthode ne me rend pas heureux, il utilise le balisage et le CSS est trop verbeux. Je pense que la meilleure solution est soit à l'aide flexbox ou la transform: translate(-50%, -50%); technique. Pour IE8 je venais de le laisser en haut/centre alignés et se déplacer.
- Bien le codepen vous lié à utilise le "display: table" méthode et extra balisage donc je ne suis pas surpris. De toute façon, +1 à votre dernière phrase.
InformationsquelleAutor Moes
28

Flexbox solution

Notes

1. Le parent de l'élément est donné le nom de la classe.

2. Ajouter flex vendeur préfixes si requis par votre navigateurs pris en charge.

CSS:
```
.verticallyCenter {
  display: flex;
  align-items: center;
}
```
HTML:
```
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>
```
- Note justify-content: center centre des éléments aussi bien à l'horizontale
InformationsquelleAutor Reggie Pinkham
20

Malheureusement — mais pas surprenant que la solution est plus compliquée qu'on le souhaiterait. Aussi, malheureusement, vous aurez besoin d'utiliser d'autres divs autour de la div vous voulez centrée verticalement.

Conforme à la norme navigateurs comme Mozilla, Opera, Safari, etc. vous devez définir la div extérieure pour être affiché comme un table l'intérieur de la div à afficher en tant que table-cell — qui peuvent ensuite être centrée verticalement. Pour Internet Explorer, vous devez position l'intérieur div absolument à l'intérieur de la div extérieure et spécifiez ensuite le haut comme 50%. Les pages suivantes expliquent bien cette technique et de fournir des exemples de code trop:
- Centrage Vertical en CSS
- ~~Centrage Vertical en CSS avec des Inconnus Hauteur (Internet Explorer 7 compatible)~~ (plus direct)
- Centrage Vertical en CSS avec des Inconnus Hauteur (Internet Explorer 7 compatible) (Archivé article courtoisie de la Wayback Machine)
Il y a aussi une technique pour faire le centrage vertical à l'aide de JavaScript. L'alignement Vertical du contenu avec JavaScript & CSS le démontre.

InformationsquelleAutor

Si quelqu'un se soucie de l'Internet Explorer 10 (et plus tard), l'utilisation flexbox:

CSS:

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

HTML:

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

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

Android < 4.4 ne prend pas en charge align-items: center; !
En fait, il prend en charge alignez-éléments: center; caniuse.com/#search=align-items
Vous voudrez peut-être jeter un oeil de plus près à la table. Pour Android < 4.4, il est dit: "ne soutient que le vieux flexbox spécification et ne prend pas en charge l'emballage."

InformationsquelleAutor bravedick

La solution la plus simple est ci-dessous:

CSS:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}

HTML:

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

En effet, la plus simple 🙂 Bien, j'ai dû mettre les styles pour un externe de la div, au lieu de corps.

InformationsquelleAutor Varsha Dhadge

Une manière moderne au centre un élément verticalement serait d'utiliser flexbox.

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

L'exemple ci-dessous centrer une div au centre à l'intérieur de votre navigateur. Ce qui est important (dans mon exemple) est de définir height: 100% à body et html et puis min-height: 100% à votre conteneur.

CSS:

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

HTML:

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

InformationsquelleAutor Marwelln

Centrage uniquement à la verticale

Si vous ne vous inquiétez pas à propos de Internet Explorer 6 et 7, vous pouvez utiliser une technique qui comporte deux conteneurs.

Le conteneur externe:

devrait avoir display: table;

Le récipient intérieur:

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

Le contenu de la boîte:

devrait avoir display: inline-block;

Vous pouvez ajouter n'importe quel contenu que vous souhaitez que le contenu de la boîte sans se soucier de sa largeur ou de la hauteur!

Démo:

CSS:

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

HTML:

<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 voulez centrer horizontalement et verticalement, vous avez aussi besoin de ce qui suit.

Le récipient intérieur:

devrait avoir text-align: center;

Le contenu de la boîte:

devrait ré-ajuster le texte horizontal-alignement par exemple text-align: left; ou text-align: right;, sauf si vous souhaitez un texte centré

Démo:

CSS:

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

HTML:

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Voir aussi ce Violon!

Cette réponse est similaire à celui-ci: stackoverflow.com/a/24570521/363573.

InformationsquelleAutor John Slegers

CSS:

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

HTML:

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

Connexes: Centre une Image

InformationsquelleAutor antelove

10

C'est toujours là où je vais quand j'ai de revenir à ce problème.

Pour ceux qui ne veulent pas faire le saut:
1. Spécifier le conteneur parent comme position:relative ou position:absolute.
2. Spécifier une hauteur fixe sur le conteneur enfant.
3. Ensemble position:absolute et top:50% sur le conteneur enfant à se déplacer du haut vers le bas au milieu de la société mère.
4. Ensemble margin-top:-yy où yy est la moitié de la hauteur du conteneur enfant pour compenser 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>
```
InformationsquelleAutor Ninx
8

J'ai juste écrit ce CSS et pour en savoir plus, veuillez consulter: Cet article vertical align quoi que ce soit avec seulement 3 lignes de CSS.
```
.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
```
- CSS transforme peuvent provoquer des distorsions dans le texte et les bordures (lorsque les résultats en mathématique dans des fractions de pixels).
InformationsquelleAutor Sanjib Debnath

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

CSS:

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

HTML:

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

Intéressant! J'utilise à peu près la même technique! -> stackoverflow.com/questions/396145/...

InformationsquelleAutor Ruwen

3

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

Vertical align quoi que ce soit avec seulement 3 lignes de CSS.

Crédits à: Sebastian Ekström.

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

InformationsquelleAutor Hicaro

Pas de réponse pour la compatibilité du navigateur, mais aussi de parler de la nouvelle Grille et de la pas si de nouvelles Flexbox fonctionnalité.

Grille

À partir de: Mozilla - Grille De Documentation - Align Div Verticalement

Prise En Charge Du Navigateur: Grille De Prise En Charge Du Navigateur

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: Flexbox Prise En Charge Du Navigateur

CSS:

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

InformationsquelleAutor ctekk

3

Les trois lignes de code à l'aide de transform fonctionne pratiquement sur les navigateurs et Internet Explorer:
```
.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}
```
Je suis l'ajout de cette réponse car j'ai trouvé quelques imperfections dans la version précédente de cette réponse (et de Dépassement de Pile ne me permet tout simplement de commentaire).
1. "position" par rapport bousille le style si la div est dans le corps et n'a pas de div conteneur. Cependant "fixe" semble fonctionner, mais il est évident qu'elle fixe le contenu dans le centre de la fenêtre
2. Aussi j'ai utilisé ce style de centrage de certains superposition de divs et a constaté que dans Mozilla tous les éléments à l'intérieur de cette transformé div avaient perdu leur bas frontières. Probablement un problème de rendu. Mais l'ajout de seulement l'un rembourrage minimal pour certains d'entre eux l'a rendue correctement. Chrome et Internet Explorer (étonnamment) a rendu les cases sans qu'il soit besoin pour le rembourrage
InformationsquelleAutor MandarK

Je pense qu'une solution solide pour tous les navigateurs, sans l'aide de flexbox - "align-éléments: center;" est une combinaison de display: table et vertical-align: middle;.

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>

‣démo: https://jsfiddle.net/6m640rpp/

InformationsquelleAutor Martin Wantke

Grille CSS

CSS:

body, html { margin: 0; }

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

HTML:

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

InformationsquelleAutor Andy Hoffman

À l'aide de flex propriété de feuille de style CSS.

CSS:

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

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

HTML:

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

ou par à l'aide de display: flex; et margin: auto;

CSS:

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

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

HTML:

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

afficher le texte centre

CSS:

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

HTML:

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

À l'aide de pourcentage(%) de la hauteur et la largeur.

CSS:

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

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

HTML:

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

InformationsquelleAutor Deepu Reghunath

2

Je l'ai fait avec ce (modifier la largeur, la hauteur, le margin-top et margin-left 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>
```
- C'est seulement bon si vous connaissez la largeur/hauteur de la DIV de votre tentative de centre. Ce n'est pas ce qui est demandé
InformationsquelleAutor Netuddki

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

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

CSS:

/* 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;
}

HTML:

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

InformationsquelleAutor Ruwen

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

CSS:

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

HTML:

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

InformationsquelleAutor Melchia

2

Pour les nouveaux arrivants s'il vous plaît essayer
```
display: flex;
align-items: center;
justify-content: center;
```
- S'il vous plaît ajouter un Pile Extrait en montrant comment ce code CSS verticalement aligne un div.
- cela fonctionne aussi <div style="display:flex"><div style="margin:auto">Inner</div></div>
- Je suis tombé sur cette très belle explication de l'aligner les éléments et de justifier le contenu. Faut Lire : stackoverflow.com/questions/42613359/...
InformationsquelleAutor Usman Iqbal

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

L'avantage de ce langage est que vous définissez votre taille du contenu en un seul endroit -> "au contenu de la page".

Les Couleurs du fond de la page et de ses marges horizontales sont définis dans les divs.

<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és:

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

InformationsquelleAutor G.Y

Le contenu peut être facilement centrée en utilisant flexbox. Le code suivant montre le CSS pour le conteneur à l'intérieur de laquelle 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;
}

InformationsquelleAutor Mahendra Liya

Cette solution a fonctionné pour moi si vous avez un élément de type block (e. g. ). 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 De Démo

InformationsquelleAutor Birol Efe

Je l'utilise. Il fonctionne dans Internet Explorer 8 et les versions ultérieures:

height:268px - pour 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>

InformationsquelleAutor Rantiev

1

Viens de le faire: Ajouter la classe à votre div:
```
.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}
```
Et lire cet article pour une explication. Remarque: Height est nécessaire.

InformationsquelleAutor Anshul
1

La suivante est de travailler dans mon cas et a été testé dans Firefox.
```
#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}
```
La div, la hauteur et la taille de ses parents sont dynamiques. Je l'utilise quand il y a d'autres éléments sur le même parent qui est supérieur à la cible de l'élément, où ils sont tous deux positionnés horizontalement sur la ligne.

InformationsquelleAutor KeepMove

Vertical & Horizontale CENTRE

HTML

<div id="dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

Profitez-en!

InformationsquelleAutor Armand

Déclarer ce Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

De l'inclure dans votre élément:

.element{
    @include vertical-align();
}

c'est simple, clair css? quel sujet de la prise en charge du navigateur?

InformationsquelleAutor Gothburz

Je viens de trouvé une autre solution qui a fonctionné pour moi:

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Plus d'informations

InformationsquelleAutor Rushabh RajeshKumar Padalia

À l'aide de la transform de la propriété, on peut faire centrée verticalement div facilement.

CSS:

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

HTML:

<div class="main-div">
    <div class="vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

Voir ici pour l'article complet

InformationsquelleAutor inaam husain

0

La meilleure chose à faire serait:
```
#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}
```
150 pixels, car c'est la moitié de la div de la hauteur dans ce cas.

InformationsquelleAutor Fastboy619
0

C'est de loin l'approche la plus facile, les travaux sur la non-blocage des éléments aussi bien, le seul inconvénient est, c'est Flexbox, donc, les anciens navigateurs ne soutiendra pas cette.
```
<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>
```
Lien vers codepen:

http://codepen.io/damianocel/pen/LNOdRp

Le point important ici est que, pour le centrage vertical, nous avons besoin de définir un élément parent (conteneur) et l'img doit avoir une hauteur plus petite que l'élément parent.
- lien rompu .. s'il vous plaît ajoutez le css directement à la réponse
InformationsquelleAutor damiano celent
0

Cette méthode n'utilise pas tout transformer. Donc il n'a pas un problème avec la sortie de devenir floue.
```
position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
```
InformationsquelleAutor th3pirat3

-1

À vertical-align une case de la page web, y compris Internet Explorer 6, vous pouvez utiliser:

Commentaires conditionnels
La haslayout propriété
display: table-value pour les autres (et maintenant flex)

Violon

CSS:

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}

HTML:

<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class="ie"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

En fait, Internet Explorer 7 apporterait un peu de mal à être ici le seul qui s'appliquent strictement height: 100% sur HTML/éléments de carrosserie.

Mais, ce qui s'est passé et d'aujourd'hui et qui ont encore l'esprit des anciennes versions d'Internet Explorer, table/table-cell est tout simplement parfait, display: flex est prometteur, et display: grid apparaîtra un jour.

downvote sur le principe le plus simple et oldiest moyen de le faire sans les besoins de taille, ni de prendre des éléments de la circulation ?

InformationsquelleAutor G-Cyr

-3

Ici est une façon simple, avec pratiquement pas de code:

Code CSS:

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

Code HTML:

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

Votre texte apparaîtra dans le milieu de la page!

InformationsquelleAutor JLavoie

-4

Cela a fonctionné dans mon cas (testé uniquement dans les navigateurs modernes):
```
.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}
```
InformationsquelleAutor stommestack

Vous devez vous connecter pour publier un commentaire.

Flexbox solution

Centrage uniquement à la verticale

Le conteneur externe:

Le récipient intérieur:

Le contenu de la boîte:

Démo:

Centrage horizontalement et verticalement

Le récipient intérieur:

Le contenu de la boîte:

Démo:

CSS

HTML

Grille CSS

CSS