Titre réécrit comme : Utilisation de Flexbox pour réaliser le centrage horizontal et vertical des éléments

Question

Comment centrer un div horizontalement et verticalement dans un conteneur à l'aide de flexbox. Dans l'exemple ci-dessous, je souhaite que chaque numéro soit centré en dessous (ligne par ligne).

.flex-container {
  remplissage : 0 ;
  marge : 0 ;
  style de liste : aucun ;
  affichage : flexible ;
  aligner les éléments : centre ;
  justifier-contenu : centre ;
}
rangée {
  largeur : 100 % ;
}
.flex-article {
  arrière-plan : tomate ;
  remplissage : 5 px ;
  largeur : 200 px ;
  hauteur : 150px ;
  marge : 10px ;
  hauteur de ligne : 150 px ;
  Couleur blanche;
  poids de la police : gras ;
  taille de police : 3em ;
  alignement du texte : centre ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="flex-container">
  <div class="ligne">
    <span class="flex-item">1</span>
  </div>
  <div class="ligne">
    <span class="flex-item">2</span>
  </div>
  <div class="ligne">
    <span class="flex-item">3</span>
  </div>
  <div class="ligne">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

Answer 1

Comment centrer des éléments verticalement et horizontalement dans Flexbox

Vous trouverez ci-dessous deux solutions de centrage courantes.

Un article flexible pour l'alignement vertical (flex-direction: column），另一种用于水平对齐的弹性项目（flex-direction: row).

Dans les deux cas, la hauteur du div centré peut être variable, indéfinie, inconnue, sans importance.

Voici le code HTML des deux :

<div id="container"><!-- flex容器 -->

    <div class="box" id="bluebox"><!-- flex项目 -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex项目 -->
        <p>DIV #2</p>
    </div>

</div>

---

CSS (hors styles décoratifs)

Lorsque les éléments flexibles sont empilés verticalement :

#container {
    display: flex;           /* 建立flex容器 */
    flex-direction: column;  /* 将主轴设置为垂直方向 */
    justify-content: center; /* 在这种情况下，垂直居中项目 */
    align-items: center;     /* 在这种情况下，水平居中项目 */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* 将文本在<p>中居中，<p>不是flex项目 */
}

Démo

---

Lorsque les éléments flexibles sont empilés horizontalement :

Ajustez les règles flex-direction dans le code ci-dessus.

#container {
    display: flex;
    flex-direction: row;     /* 将主轴设置为水平方向（默认设置） */
    justify-content: center; /* 在这种情况下，水平居中项目 */
    align-items: center;     /* 在这种情况下，垂直居中项目 */
    height: 300px;
}

Démo

---

Centrez le contenu de l'élément flexible

La portée du

Contexte de formatage flexible est limitée aux relations parent-enfant. Les descendants d'un conteneur flex au-delà de ses enfants ne participent pas à la disposition flex et ignoreront les propriétés flex. Fondamentalement, les propriétés élastiques ne sont pas transmissibles en dehors des enfants.

Vous devez donc toujours appliquer display: flex或display: inline-flex à l'élément parent afin d'appliquer la propriété flex aux éléments enfants.

Pour centrer du texte ou un autre contenu verticalement et/ou horizontalement, faites de l'élément un conteneur flexible (imbriqué) et répétez les règles de centrage.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* 对于单行弹性容器 */
    align-content: center;      /* 对于多行弹性容器 */
}

Pour plus de détails, voir : Comment aligner verticalement du texte dans flexbox ?

Vous pouvez également appliquer margin: auto à l'élément de contenu d'un élément flexible.

p { margin: auto; }

Apprenez-en plus sur les marges flex auto ici : Façons d'aligner les éléments flexibles (voir encadré n°56).

---

Article flexible multiligne centré

Lorsque le conteneur flexible comporte plusieurs lignes (en raison du retour à la ligne), la propriété align-content sera cruciale pour l'alignement sur les axes transversaux.

De spécification :

Pour plus de détails, voir : Comment flex-wrap fonctionne-t-il avec align-self, align-items et align-content ?

---

Prise en charge du navigateur

Flexbox est pris en charge dans tous les principaux navigateurs, sauf IE <10. Certaines versions récentes du navigateur, telles que Safari 8 et IE10, nécessitent le préfixe du fournisseur. Pour ajouter rapidement des préfixes, vous pouvez utiliser Autoprefixer. Voir cette réponse pour plus de détails.

---

Solution de centrage pour les anciens navigateurs

Pour une solution de centrage alternative utilisant des tables CSS et des propriétés de positionnement, voir cette réponse : https://stackoverflow.com/a/31977476/3597276

Answer 2

Je pense que ce que vous voulez est le suivant.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>