Flexbox: centrer horizontalement et verticalement

Comment centrer div horizontalement et verticalement dans le conteneur en utilisant flexbox. Dans l'exemple ci-dessous, je veux que chaque nombre au-dessous les uns des autres (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

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 sur: http://jsfiddle.net/audetwebdesign/tFscL/

Vos .flex-iteméléments doivent être au niveau du bloc ( divau lieu de span) si vous souhaitez que la hauteur et le rembourrage supérieur / inférieur fonctionnent correctement.

En outre, sur .row, définissez la largeur sur au autolieu de 100%.

Vos .flex-containerpropriétés vont bien.

Si vous souhaitez que le .rowcentre soit centré verticalement dans le port de vue, affectez 100% de hauteur à htmlet body, et mettez également à zéro les bodymarges.

Notez qu'il a .flex-containerbesoin d'une hauteur pour voir l'effet d'alignement vertical, sinon, le conteneur calcule la hauteur minimale nécessaire pour enfermer le contenu, qui est inférieure à la hauteur du port de vue dans cet exemple.

Note:
La flex-flow, flex-direction, les flex-wrappropriétés aurait pu faire cette conception plus facile à mettre en œuvre. Je pense que le .rowconteneur n'est pas nécessaire, sauf si vous souhaitez ajouter un style autour des éléments (image d'arrière-plan, bordures, etc.).

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

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

Voici deux solutions générales de centrage.

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 divisions centrées peut être variable, indéfinie, inconnue, peu importe. La hauteur des divisions centrées n'a pas d'importance.

Voici le 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 */
}

DEMO

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

Ajustez la flex-directionrègle à 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;
}

DEMO

Centrer le contenu des éléments flexibles

La portée d'un contexte de mise en forme 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 ignoreront 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: flexou display: inline-flexà un élément parent afin d'appliquer des propriétés flex à l'enfant.

Pour centrer verticalement et / ou horizontalement du texte ou un autre contenu contenu dans un élément flexible, 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;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Plus de détails ici: Comment aligner verticalement du texte à l'intérieur d'une flexbox?

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

p { margin: auto; }

En savoir plus sur les automarges flexibles ici: Méthodes pour aligner les éléments flexibles (voir l'encadré # 56).

Centrage de plusieurs lignes d'éléments flexibles

Lorsqu'un conteneur flexible a plusieurs lignes (en raison de l'habillage), la align-contentpropriété sera nécessaire pour l'alignement transversal.

De la spécification:

8.4. Packing Flex Lines: la align-content propriété

La align-contentpropriété aligne les lignes d'un conteneur flexible dans le conteneur flexible lorsqu'il y a de l'espace supplémentaire dans l'axe transversal, de la même manière que pour justify-contentaligner des éléments individuels sur l'axe principal. Remarque, cette propriété n'a aucun effet sur un conteneur flexible à une seule ligne.

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

Prise en charge du navigateur

Flexbox est pris en charge par tous les principaux navigateurs, à l' exception d'IE <10 . Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent des préfixes de fournisseur . Pour ajouter rapidement des préfixes, utilisez le préfixe automatique . 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 cette réponse: https://stackoverflow.com/a/31977476/3597276

Ajouter

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

à l'élément conteneur de tout ce que vous souhaitez centrer. Documentation: justifier le contenu et aligner les éléments .

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

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 mieux comprendre le flex: http://css-tricks.com/almanac/properties/j/justify-content/ et http://ptb2.me/flexbox/

Bonne chance.

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

2 - Définissez CSS sur div parent sur flex-direction: column;
Notez que cela rendra tout le contenu de cette ligne div de haut en bas. Cela fonctionnera mieux si la div parent ne contient que l'enfant et rien d'autre.

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

Voici un exemple de ce à quoi ressemblera le CSS:

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

Vous pouvez utiliser

display: flex; align-items: center; justify-content: center;

sur votre composant parent

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;car son conteneur et margin:auto;son article fonctionnent parfaitement.

REMARQUE: vous devez configurer le widthet heightpour 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>

Si vous devez 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>

margin: autofonctionne 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>

RÉSULTAT:

CODE

HTML:

<div class="flex-container">
  <div class="rows">

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

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

où flex-containerdiv est utilisé pour centrer verticalement et horizontalement votre rowsdiv, et rowsdiv est utilisé pour regrouper vos "éléments" et les classer dans une colonne.

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

Utiliser CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

jetez un œil ICI