Question 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 voir, l'approche que j'utilise dépend des valeurs de largeur et de hauteur innerDiv.Si la largeur / hauteur change, je devrai modifier le margin-top et margin-left Il existe une solution générique que je peux utiliser pour centrer innerDiv toujours indépendamment de sa taille?

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


440
2018-06-27 08:22


origine


Réponses:


tl; dr

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

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

La solution classique (mise en page)

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 sera impacter votre performance de rendu Je suggère donc que vous utilisiez 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 (transformer)

Puisque les transformations sont assez bien supporté maintenant il y a un moyen plus facile 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 la flexbox c'est aussi bien supporté maintenant C'est de loin le moyen le plus facile.

CSS

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

Démo

Plus d'exemples et de possibilités: Comparez toutes les méthodes sur une page 


607
2018-06-27 08:26



Une autre façon de réaliser ce centrage horizontal et vertical est:

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

(Référence)


104
2017-08-14 06:48



Une autre façon est d'utiliser Transform Traduire

La Div extérieure doit définir son position à relative ou fixed, et la division intérieure doit définir son position à absolute, top et left à 50% et appliquer un 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 -webkit- prefix)
  • Firefox 31.0 (minimum 3.6 avec préfixe -moz-, à partir de 16 sans préfixe)
  • Chrome 36 (minimum 11 avec -webkit- préfixe, à partir de 36 sans préfixe)
  • IE 11, 10 (minimum 9 avec préfixe -ms-, à partir de 10 sans préfixe)
  • Plus de navigateurs, puis-je utiliser?

41
2017-09-05 17:35



Aligner verticalement n'importe quoi 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 parent of element a une hauteur ou du contenu qui augmente sa taille verticale.


38
2018-04-10 23:10



Au lieu de me nouer dans un nœud avec CSS difficile à écrire et difficile à maintenir (qui a également besoin d'une validation multi-navigateur minutieuse!) Je trouve qu'il vaut mieux abandonner CSS et utiliser à la place merveilleusement simple HTML 1.0:

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


17
2017-10-12 02:59



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

Voici un violon avec tous les CSS dont vous aurez 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
2018-05-22 16:31



J'utilise la solution suivante depuis plus d'un an, cela fonctionne aussi 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
2017-07-27 19:55



Cela fonctionne pour moi. La largeur et la hauteur de la div externe 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
2018-02-24 21:49



Fiddle Link < 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
2017-07-26 09:49