web-dev-qa-db-fra.com

Flexbox: centre horizontalement et verticalement

Comment centrer horizontalement et verticalement le conteneur à l’aide de la flexbox. Dans l'exemple ci-dessous, je veux que chaque nombre se trouve l'un en dessous de l'autre (en lignes), qui sont centrés horizontalement.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

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

htmlcsshtml5css3flexbox
553
bsr

Je pense que vous voulez quelque chose comme ce qui suit.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    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>

Voir la démo à: http://jsfiddle.net/audetwebdesign/tFscL/

Vos éléments .flex-item doivent être au niveau du bloc (div au lieu de span) si vous voulez que la hauteur et les marges de remplissage supérieure/inférieure fonctionnent correctement.

De même, sur .row, définissez la largeur sur auto au lieu de 100%.

Vos propriétés .flex-container vont bien.

Si vous souhaitez que le .row soit centré verticalement dans le port de visualisation, affectez une hauteur de 100% à html et body, et mettez également à zéro les marges body.

Notez que .flex-container a besoin d'une hauteur pour voir l'effet d'alignement vertical. Sinon, le conteneur calcule la hauteur minimale nécessaire pour inclure le contenu, qui est inférieure à la hauteur du port de vue dans cet exemple.

Note de bas de page:
Les propriétés flex-flow, flex-direction, flex-wrap auraient pu faciliter la mise en œuvre de cette conception. Je pense que le conteneur .row n'est pas nécessaire, sauf si vous souhaitez ajouter du style autour des éléments (image d'arrière-plan, bordures, etc.).

Une ressource utile est: http://demo.agektmr.com/flexbox/

628
Marc Audet

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

Vous trouverez ci-dessous deux solutions de centrage générales.

Un pour les éléments flexibles alignés verticalement (flex-direction: column) et l'autre pour les éléments flexibles alignés horizontalement (flex-direction: row).

Dans les deux cas, la hauteur des divs centrés peut être variable, indéfinie, inconnue, peu importe. La hauteur des divs centrés n'a pas d'importance.

Voici le code HTML pour les deux: 

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

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

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

</div>

CSS (à l'exclusion des styles décoratifs)

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

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

enter image description here

DÉMO

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

Ajustez la règle flex-direction à partir du code ci-dessus.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

enter image description here

DÉMO

Centrer le contenu des éléments flex

La portée d'un contexte de formatage flexible est limitée à une relation parent-enfant. Les descendants d'un conteneur flex au-delà des enfants ne participent pas à la disposition flex et ignorent les propriétés flex. Essentiellement, les propriétés flex ne sont pas héritables au-delà des enfants.

Par conséquent, vous devrez toujours appliquer display: flex ou display: inline-flex à un élément parent afin d'appliquer les propriétés flex à l'enfant.

Afin de centrer verticalement et/ou horizontalement le texte ou tout autre contenu contenu dans un élément flexible, faites-en un conteneur flexible (imbriqué) et répétez les règles de centrage.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Plus de détails ici: Comment aligner verticalement du texte dans une flexbox?

Vous pouvez également appliquer margin: auto à l'élément de contenu de l'élément flex.

p { margin: auto; }

En savoir plus sur les marges de flexion auto ici: méthodes d’alignement des éléments flexibles (voir encadré n ° 56).

Centrer plusieurs lignes d'éléments flexibles

Lorsqu'un conteneur Flex comporte plusieurs lignes (en raison du retour à la ligne), la propriété align-content sera nécessaire pour l'alignement transversal.

À partir de la spécification:

8.4. Lignes d’emballage flexibles: la propriété align-content

La propriété align-content aligne les lignes d’un conteneur Flex dans le conteneur Flex lorsque l’axe transversal contient davantage d’espace, de la même manière que justify-content aligne les éléments individuels dans l’axe principal. Notez que cette propriété n'a aucun effet sur un conteneur flex sur une seule ligne.

Plus de détails ici: Comment fonctionne le flex-wrap avec align-self, align-items et align-content?

Support du navigateur

Flexbox est supporté par tous les principaux navigateurs, sauf IE <1 . Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent préfixes du fournisseur . Pour ajouter rapidement des préfixes, utilisez Autoprefixer . Plus de détails dans cette réponse .

Solution de centrage pour les anciens navigateurs

Pour une solution de centrage alternative utilisant la table CSS et les propriétés de positionnement, voir la réponse suivante: https://stackoverflow.com/a/31977476/3597276

224
Michael_B

Ajouter

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

à l'élément conteneur de tout ce que vous voulez centrer. Documentation: justifier-conten et aligner-éléments .

34
ben
display: flex;
align-items: center;
justify-content: center;
29
Asiya Fatima

N'oubliez pas d'utiliser les attributs spécifiques importants des navigateurs:

align-items: centre; ->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justifier-contenu: centre; ->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Vous pouvez lire ces deux liens pour une meilleure compréhension flex: http://css-tricks.com/almanac/properties/j/justify-content/ et http://ptb2.me/flexbox /

Bonne chance.

26
QMaster

1 - Définissez CSS sur le div parent à display: flex;

2 - Définissez CSS sur le div parent à flex-direction: column;
Notez que tout le contenu de cette ligne divisionnera tout le contenu. Ceci fonctionnera mieux si la div mère ne contient que l’enfant et rien d’autre.

3 - Définissez CSS sur le div parent à justify-content: center;

Voici un exemple de ce à quoi le CSS ressemblera:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
14
MelanieP

diplay: flex; pour son conteneur et margin:auto; pour son article fonctionne parfaitement.

NOTE: Vous devez configurer les paramètres width et height pour voir l'effet.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>
6
Polar

Si vous avez besoin de centrer un texte dans un lien, cela fera l'affaire:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>
3
Leo

margin: auto fonctionne parfaitement avec flexbox. Il centralise verticalement et horizontalement.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>
3
Aksana Tolstoguzova