web-dev-qa-db-fra.com

Centrer verticalement une div à l'intérieur d'une autre div

Je veux centrer un div qui est ajouté à l'intérieur d'un autre div.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

C'est le CSS que j'utilise actuellement.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Comme vous pouvez le constater, l’approche que j’utilise maintenant dépend des valeurs de largeur et de hauteur de innerDiv. Si la largeur/la hauteur change, je devrai modifier les valeurs de margin-top et de margin-left. innerDiv toujours indépendamment de sa taille?

J'ai compris que l'utilisation de margin:auto peut aligner horizontalement le innerDiv au milieu. Mais qu'en est-il de l'alignement vertical du milieu?

htmlcsshtml5css3
481
user700284

tl; dr

L'alignement vertical au milieu fonctionne, mais vous devrez utiliser table-cell sur votre élément parent et inline-block sur l'enfant.

Cette solution ne fonctionnera pas dans IE6 & 7. 
Le vôtre est le moyen le plus sûr d’y aller. 
Mais puisque vous avez marqué votre question avec CSS3 et HTML5, je pensais que cela ne vous dérangeait pas d'utiliser une solution moderne.

La solution classique (tableau)

C'était ma réponse originale. Cela fonctionne toujours bien et est la solution avec le support le plus large. La disposition de la table va affecter vos performances de rendu donc je vous suggère d'utiliser l'une des solutions les plus modernes.

Voici un exemple

Testé dans: 

  • FF3.5 +
  • FF4 +
  • Safari 5+
  • Chrome 11+
  • IE9 +

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Solution moderne (transformation)

Puisque les transformations sont assez bien supportées maintenant il existe un moyen plus simple de le faire.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

_ { Démo } _ 

♥ ma solution moderne préférée (flexbox)

J'ai commencé à utiliser de plus en plus flexbox aussi bien supporté maintenant C'est de loin le moyen le plus simple.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

_ { Démo } _

Autres exemples et possibilités: Comparez toutes les méthodes sur une seule page

666
meo

Une autre manière de réaliser ce centrage horizontal et vertical consiste à:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( Référence )

109
user700284

Transform Translate est un autre moyen.

La division extérieure doit définir sa position sur relative ou fixed, et la division intérieure doit définir sa position sur absolute, top et left sur 50% et appliquer une transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Testé dans:

  • Opera 24.0 (minimum 12.1)
  • Safari 5.1.7 (minimum 4 avec le préfixe -webkit-)
  • Firefox 31.0 (minimum 3.6 avec le préfixe -moz-, à partir de 16 sans préfixe) 
  • Chrome 36 (minimum 11 avec le préfixe -webkit-, à partir de 36 sans préfixe)
  • IE 11, 10 (minimum 9 avec le préfixe -ms-, à partir de 10 sans le préfixe)
  • Plus de navigateurs, puis-je utiliser?
45
rnrneverdies

Vertical Align Anything avec seulement 3 lignes de CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Le plus simple

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Selon shouldiprefix ce sont les seuls préfixes dont vous avez besoin

Vous pouvez également utiliser% comme valeur pour la propriété 'height' de .parent-of-element, tant que le parent de l'élément a une hauteur ou un contenu qui développe sa taille verticale.

39
drjorgepolanco

Au lieu de m'attacher à un nœud avec des CSS difficiles à écrire et à maintenir (qui nécessite également une validation minutieuse entre navigateurs!), Je trouve qu'il est de loin préférable d'abandonner les CSS et d'utiliser à la place un code HTML 1.0 merveilleusement simple:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

Ceci accomplit tout ce que l'affiche originale voulait, et est robuste et maintenable.

16
Iron Pillow

Personnellement, je préfère utiliser un pseudo-élément masqué pour couvrir toute la hauteur du conteneur externe et l'aligner verticalement avec l'autre contenu . Chris Coyier a rédigé un article de Nice sur la technique. http://css-tricks.com/centering-in-the-unknown/ L'énorme avantage de cette technologie est son évolutivité. Vous n'avez pas besoin de connaître la hauteur du contenu ni de vous inquiéter de sa croissance/diminution. Cette solution évolue :).

Voici un violon avec tout le CSS dont vous avez besoin et un exemple de travail. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
5
Harry Robbins

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

vous pouvez le faire en ajoutant simplement le style css mentionné ci-dessus. Bonne chance. pour requête écrire un commentaire

4
Nishant Singh

Lorsque votre height n'est pas défini (auto); vous pouvez donner à la div interne un certain rembourrage (haut et bas) pour le centrer verticalement

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
3
Majid

Centrer verticalement les objets div dans un autre div

Il suffit de définir le conteneur sur display:table, puis les éléments internes sur display:table-cell. Définissez une height sur le conteneur, puis définissez vertical-align:middle sur les éléments internes. Cela a une compatibilité étendue depuis IE9.

Notez simplement que l'alignement vertical dépendra de la hauteur du conteneur parent.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

3
Volomike

entrez la description de l'image ici100% cela fonctionne 

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

2
Mangesh Jadhav

Lien de violon < http://jsfiddle.net/dGHFV/2515/ >

Essaye ça

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
2
Friend

Cela fonctionne pour moi. La largeur et la hauteur de la largeur extérieure peuvent être définies.

Voici le code: 

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

2
phlegx

J'utilise la solution suivante depuis plus d'un an. Elle fonctionne également avec IE 7 et 8. 

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
2
Arsh

Si vous n'avez toujours pas compris après avoir lu les merveilleuses réponses données ci-dessus.

Voici deux exemples simples de la façon dont vous pouvez y parvenir. 

Utilisation de display: table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

Utilisation de flex-box (display: flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

Remarque: Vérifiez la compatibilité de display: table-cell et flex avec le navigateur avant d'utiliser les implémentations susmentionnées.

2
shivamsupr

essayez d'aligner l'élément interne comme ceci:

top: 0;
bottom: 0;
margin: auto;
display: table;

et bien sur:

position: absolute;
1
VonAxt

Vous pouvez centrer la div verticalement et horizontalement en CSS en utilisant flex;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

Et le second est comme suit; 

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

Et le HTML résultant:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>
1
Tariq Javed

Vous pouvez le faire avec un simple bloc javascript (jQuery).

CSS:

#outerDiv{
    height:100%;
}

Javascript :

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
1
Ghanesh MV

Cela fonctionnera de retour à IE6!

<!DOCTYPE html> est également requis sur IE6! [force le mode strict par défaut d'IE6].

(bien sûr, la coloration de la boîte est uniquement à des fins de démonstration) 

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

1
Bekim Bacaj

pour innerdiv qui ne spécifie pas sa valeur de hauteur, il n'y a pas de solution pure en CSS pour la centrer verticalement. Une solution javascript pourrait être de offsetHeight, puis calculer le style.marginTop. 

1
james li

text align-center sur l’élément parent, display inline-block sur l’élément enfant. Cela centrera presque tout. Je crois que son appel est un "bloc flottant".

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

C'est aussi une bonne alternative aux flotteurs, bonne chance!

0
user3943543

Je voudrais montrer une autre méthode multi-navigateur qui peut résoudre cette question à l'aide de CSS3 calc().
Nous pouvons utiliser la fonction calc() pour contrôler la propriété margin-top de la div enfant lorsqu'elle est positionnée de manière absolue par rapport à la div parent.


L’avantage principal de calc() est que la hauteur de l’élément parent peut être modifiée à tout moment et que la div de l’enfant sera toujours alignée au centre.
Le calcul de margin-top est effectué de manière dynamique (par css et non par un script et c’est un très gros avantage).

Cochez cette LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will allways            center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

Sortie:

 enter image description here

0
jonathana

Centrer verticalement une div à l'intérieur d'une autre div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

0
antelove

Pour centrer l'alignement verticalement et horizontalement:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}
0
Bhimashankar Sutar