Flexbox: centrer horizontalement et verticalement


672

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



Dans votre CSS, vous avez row{ce qui n'a aucun effet sur les lignes. Si vous le modifiez, .row{le résultat serait totalement différent.
Hamid Mayeli

Réponses:


753

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/


5
Les éléments flexibles n'ont pas besoin d'être au niveau du bloc, sauf si le contenu qu'ils contiennent l'exige. De plus, vous avez préfixé toutes les propriétés d'affichage, mais vous n'avez préfixé aucune des autres propriétés Flexbox (qui ont des noms différents dans les autres brouillons).
cimmanon

1
@cimmanon Je suis d'accord avec vous sur le niveau de bloc et j'ai modifié mon article en conséquence. Le niveau de bloc n'est pas requis pour l'alignement mais peut être nécessaire si l'utilisateur souhaite spécifier la hauteur, etc. J'ai pris la liberté sur les préfixes du navigateur, j'ai juste supposé un navigateur parfait pour arriver à une démo fonctionnelle. Merci encore pour votre commentaire, appréciez les commentaires.
Marc Audet

1
S'il déborde, il recadre le haut. i.imgur.com/3dgFfQK.png Comment éviter cela?
Brian Gates

1
@BrianGates Si la hauteur de la fenêtre est trop courte, comment voulez-vous que les 4 éléments soient affichés, 2x2, 1x4?
Marc Audet


253

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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


pouvons-nous le faire horizontalement à droite, à gauche et verticalement au centre?
kapil

2
@kapil, ajustez la propriété de contenu justifié à un espace entre ou un espace autour ... jsfiddle.net/8o29y7pd/105
Michael Benjamin

3
Cette réponse devrait être au top. L'utilisation de Flex devrait être la manière préférée de le faire, car elle évolue bien sur les appareils et l'écran. C'est beaucoup plus facile que d'utiliser des flotteurs et de gérer plusieurs divisions.
SeaWarrior404

Ie 11 ne fonctionne pas correctement au centre horizontal et vertical
giveJob

1
Réponse parfaite, probablement la meilleure sur Google!
JAN

43

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 .


3
Merci pour la réponse succincte. Bien que tout le verbiage ci-dessus soit correct, ces 3 lignes sont exactement ce que je suis arrivé ici à la recherche (enfin, display: inline-flexdans mon cas, mais c'était une modification facile.)
Jeff Ward

27

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
c'est un bon point, pour aujourd'hui (pour ne prendre en charge que les navigateurs les plus récents), vous avez juste besoin des deux dernières lignes -webkit .. pour safari et la dernière pour toutes les autres
Pete Kozak

1
+1 parce que les anciennes versions préliminaires de 2009 et mars 2012 ont toujours une part d'utilisateurs importante (combinées à environ 8% selon caniuse.com ).
benebun

Flext ne fonctionne pas en safari, comment pouvez-vous résoudre ce problème?
user3378649

J'ai vérifié la dernière version de safari sur windows il y a plusieurs jours et je ne m'en souviens pas très bien, mais je vais vérifier et je vais vous dire. Dites-moi simplement quelle version de safari vouliez-vous dire? et sur quel OS?
QMaster

@ user3378649 La dernière version de safari pourrait prendre en charge Flex-box, veuillez consulter ce lien: caniuse.com/#search=flexbox
QMaster

15

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



8

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>


3

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>


1
Doux! Parfois, je sens que je suis trop dump pour Flexbox.) Supposons que j'ai besoin de plus de pratique, une partie de sa logique n'est pas encore claire. Merci, Leo!
Zoltán

3

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>


1

RÉSULTAT: Code

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

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.


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

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant la manière et / ou la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse.
Piotr Labunski

-7

Utiliser CSS +

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

jetez un œil ICI


1
comme cela est facilement et largement pris en charge par les navigateurs modernes avec pure flexbox, votre solution de bibliothèque n'est certainement pas nécessaire. D'autant plus qu'il a demandé comment le faire en utilisant flex box et non une bibliothèque css.
bungleofsketches
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.