Question Comment centrer horizontalement un
dans un autre
?


Comment puis-je centrer horizontalement un <div> dans un autre <div> en utilisant CSS (si c'est même possible)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3626
2018-06-09 08:34


origine


Réponses:


Vous pouvez appliquer ce CSS à l'intérieur <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Bien sûr, vous n'avez pas à définir le width à 50%. Toute largeur inférieure au contenant <div> marchera. le margin: 0 auto est ce que le centrage réel.

Si vous ciblez IE8 +, il serait peut-être préférable d'avoir ceci à la place:

#inner {
  display: table;
  margin: 0 auto;
}

Il fera en sorte que l'élément interne soit centré horizontalement et fonctionne sans définir de width.

Exemple de travail ici:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4087



Si vous ne voulez pas définir une largeur fixe sur l'intérieur div vous pourriez faire quelque chose comme ça:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Cela fait l'intérieur div dans un élément en ligne qui peut être centré avec text-align.


1109



Les meilleures approches sont avec CSS 3.

Modèle de boîte:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Selon votre facilité d'utilisation, vous pouvez également utiliser box-orient, box-flex, box-direction Propriétés.

Fléchir:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

En savoir plus sur le centrage des éléments enfants

Et cela explique pourquoi le modèle de boîte est la meilleure approche:


297



Supposons que votre div est 200px large:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Assurez-vous que l'élément parent est positionné c'est-à-dire relatif, fixe, absolu ou collant.

Si vous ne connaissez pas la largeur de votre div, vous pouvez utiliser transform:translateX(-50%); au lieu de la marge négative.

https://jsfiddle.net/gjvfxxdj/


215



J'ai créé ceci Exemple montrer comment verticalement et horizontalement  align.

Le code est fondamentalement ceci:

#outer {
  position: relative;
}

et...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

et il restera dans le center même quand vous redimensionner votre écran.


200



Certaines affiches ont mentionné le CSS 3 au centre en utilisant display:box.

Cette syntaxe est obsolète et ne devrait plus être utilisée. [Voir également ce post].

Donc, juste pour l'exhaustivité, voici la dernière façon de centrer en CSS 3 en utilisant le Module de disposition de boîte flexible.

Donc, si vous avez un balisage simple comme:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... et vous souhaitez centrer vos éléments dans la boîte, voici ce dont vous avez besoin sur l'élément parent (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Si vous avez besoin de prendre en charge les anciens navigateurs qui utilisent une syntaxe plus ancienne pour Flexbox voici un bon endroit pour regarder.


156



Si vous ne souhaitez pas définir une largeur fixe et ne souhaitez pas ajouter de marge, ajoutez display: inline-block à votre élément.

Vous pouvez utiliser:

#element {
    display: table;
    margin: 0 auto;
}

119