web-dev-qa-db-fra.com

Comment centrer verticalement une div pour tous les navigateurs?

Je veux centrer un div verticalement avec CSS. Je ne veux pas de tableaux ni de JavaScript, mais uniquement du CSS pur. J'ai trouvé des solutions, mais toutes ne disposent pas du support d'Internet Explorer 6.

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

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

csscross-browseralignmentvertical-alignmentcentering
1284
Burak Erdem

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

Voir un exemple de travail avec un contenu dynamique

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

1302
Billbad

Un de plus 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 piratage!)
  • Réactif avec pourcentages et min/max
  • Centré quel que soit le rembourrage (sans dimensionnement de la boîte!)
  • height doit être déclaré (voir hauteur variable )
  • Paramètre recommandé overflow: auto pour éviter le débordement du contenu (voir Débordement).

Source: Centrage horizontal et vertical absolu en CSS

265
Yisela

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

1) position: relative;

2) en haut: 50%;

) 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>
214
DrupalFever

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

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

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

Voici le résultat

132
sticks464

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>
90
Santosh Khalse

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

Le support commence par IE8.

74
Armel Larcier

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% */
}
57
ymakux

Pour centrer la div sur une page, vérifiez le lien de 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 est d'utiliser flex box, vérifiez le lien de 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>
34
Moes

Solution Flexbox

Notes
1. L'élément parent reçoit le nom de la classe.
2. Ajoutez des préfixes de fournisseur flex 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>
30
Reggie Pinkham

Malheureusement, mais sans surprise, la solution est plus compliquée qu'on ne le souhaiterait. Aussi, malheureusement, vous devrez utiliser des divs supplémentaires autour de la div que vous voulez centrer verticalement.

Pour les navigateurs conformes aux normes tels que Mozilla, Opera, Safari, etc., vous devez définir la division externe à afficher sous forme de tableau et la division interne à être affiché comme une table-cellule - qui peut ensuite être centrée verticalement. Pour Internet Explorer, vous devez positionner la div interne de manière absolue dans le external div et spécifiez ensuite le haut comme 50% . Les pages suivantes expliquent bien cette technique et fournissent également des exemples de code:

Il existe également une technique pour effectuer le centrage vertical à l'aide de JavaScript. alignement vertical du contenu avec JavaScript et CSS le démontre.

21
sids

La solution la plus simple est la suivante:

.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>
20
Varsha Dhadge

Si quelqu'un s'intéresse à 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>

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

20
bravedick

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

  • devrait avoir display: table;

Le conteneur intérieur:

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

La zone de contenu:

  • devrait avoir display: inline-block;

Vous pouvez ajouter le contenu de votre choix dans la zone de contenu sans se 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>

Voir aussi ce violon !

Centrer horizontalement et verticalement

Si vous souhaitez centrer horizontalement et verticalement, vous devez également disposer des éléments suivants.

Le conteneur intérieur:

  • devrait avoir text-align: center;

La zone de contenu:

  • doit réajuster l'alignement de texte horizontal sur text-align: left; ou text-align: right;, par exemple, sauf si vous souhaitez 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 violon !

14
John Slegers

Un moyen 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 pour centrer.

L'exemple ci-dessous centrera un div au centre de votre navigateur. Ce qui est important (dans mon exemple) est de définir height: 100% sur body et html, puis min-height: 100% dans 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>
14
Marwelln
.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>

Connexes: Centrer une image

13
antelove

C'est toujours là que je vais quand je dois revenir à ce numéro .

Pour ceux qui ne veulent pas faire le saut:

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

Un exemple de ceci dans le code:

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

Je viens d'écrire ce CSS et pour en savoir plus, merci de lire: Cet article avec vertical aligne n'importe quoi avec seulement 3 lignes de CSS .

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

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

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

afficher le centre de texte

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

tilisation du pourcentage (%) de hauteur et de 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>
6
Deepu Reghunath

La réponse de Billbad ne fonctionne qu'avec une largeur fixe du .inner div. Cette solution fonctionne pour une largeur dynamique en ajoutant l'attribut text-align: center à 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>
4
Ruwen

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

Demo: https://jsfiddle.net/6m640rpp/

3
Martin Wantke

Le lien suivant présente un moyen simple de le faire avec seulement 3 lignes dans votre CSS:

vertical aligner 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é dans le lien pour sa simplicité.

3
Hicaro

Ne répondez pas à la compatibilité du navigateur, mais mentionnez également la nouvelle grille et la fonctionnalité pas si nouvelle Flexbox.

Grille

De: Mozilla - Documentation sur la grille - Aligner les divisions verticalement

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;
3
ctekk

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

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

J'ajoute cette réponse car j'ai trouvé des lacunes dans la version précédente de cette réponse (et Stack Overflow ne me permet pas de simplement commenter).

  1. Le paramètre 'position' perturbe le style si la div en cours est dans le corps et n'a pas de div en conteneur. Cependant, "corrigé" semble fonctionner, mais il corrige évidemment le contenu au centre de la fenêtre position: relative

  2. J'ai également utilisé ce style pour centrer certaines divs superposées et constaté que dans Mozilla, tous les éléments de cette div transformée avaient perdu leurs bordures inférieures. Peut-être un problème de rendu. Mais l'ajout du remplissage minimal à certains d'entre eux l'a rendu correctement. Chrome et Internet Explorer (de manière surprenante) ont restitué les cases sans aucun remplissage. mozilla without inner paddingsmozilla with paddings

3
MandarK

CSS Grid

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
3
Andy Hoffman

Surtout pour les divs parents de hauteur relative (inconnue), la solution centrée sur l'inconn me convient parfaitement. Il y a quelques très bons exemples de code dans l'article.

Il a été testé sous 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>
2
Ruwen

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

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

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

Il y a un truc que j'ai découvert récemment: vous devez utiliser top 50% & alors 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>
2
Melchia

Pour les nouveaux arrivants s'il vous plaît essayez

display: flex;
align-items: center;
justify-content: center;
2
Usman Iqbal

Je l'utilise. Cela fonctionne dans Internet Explorer 8 et 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>
1
Rantiev

Le contenu peut être facilement centré en utilisant 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;
}
1
Mahendra Liya

Je trouve celui-ci le plus utile. Il donne la mise en page "H" la plus précise et est très simple à comprendre.

L'avantage de ce balisage est que vous définissez la taille de votre contenu à un seul endroit -> "PageContent".
Les couleurs du fond de la page et ses marges horizontales sont définies dans les div correspondants.

<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;
}
1
G.Y

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

HTML: 

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

CSS: 

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

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

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

.skin_blue {
    background-color: blue;
}

Démo du code JSFiddle

1
Birol Efe

Ce qui suit fonctionne 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 hauteur de la div et la hauteur du parent sont dynamiques. Je l'utilise lorsqu'il y a d'autres éléments sur le même parent qui sont plus élevés que l'élément cible, où les deux sont positionnés horizontalement en ligne.

1
KeepMove

Faites-le simplement: Ajoutez la classe à votre div:

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

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

1
Anshul

Vertical & Horizontal CENTER

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

Prendre plaisir!

0
Armand

La meilleure chose à faire serait:

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150 pixels parce que c'est la moitié de la hauteur de la div dans ce cas.

0
Fastboy619

Je viens de trouver un autre moyen 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

0
Rushabh RajeshKumar Padalia

Déclarez ce Mixin:

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

Ensuite, incluez-le dans votre élément:

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

C'est de loin l'approche la plus simple, elle fonctionne également sur les éléments non bloquants. Le seul inconvénient est qu'il s'agit de la Flexbox. Par conséquent, les navigateurs plus anciens ne la prendront pas en charge.

<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 devons définir un élément parent (conteneur) et img doit avoir une hauteur inférieure à celle de l’élément parent.

0
damiano celent

Cette méthode n'utilise aucune transformation. Donc, il n'y a pas de problème avec la sortie devient floue.

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
0
th3pirat3

En utilisant la propriété transform, nous pouvons facilement créer un div verticalement centré.

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

0
inaam husain