Comment Centrer le Contenu Verticalement et Horizontalement Avec Flexbox

Les développerus peuvent garantir que centrer le contenu est l'une des choses plus difficiles à faire en mise en page CSS. Flexbox CSS nous permet d'avoir plus de contrôle sur l'alignement des éléments HTML, y compris le centrement de tous ce que vous voulez.

Maintenant nous allons montrer comment il est facile de centrer le contenu verticalement et horizontalement avec les pas ci-dessous.

Travaillons avec cet exemple:

1. Créez HTML

  • Créez un élément <div> avec un ID nommé "big-box" et un autre <div> d'un nom "small-box".
<h2>Centrer le contenu</h2>
<div id="big-box">
  <div id="small-box"></div>
</div>

2. Créez CSS

Ici nous avons deux éléments <div>. Notre tâche est de centrer l'id "small-box" dans l'id "bix-box".

  • Premièrement, utilisez la propriété width pour définir la largeur pour les deux boîtes. Changez la largeur selon vos besoins.
  • Ensuite, définissez la hauteur des boîtes en utilisant la propriété height.
  • Définissez vos couleurs préférées pour les divs en utilisant la propriété background-color.
#big-box {
  width: 200px;
  height: 200px;
  background-color: #666666;
}
#small-box {
  width: 100px;
  height: 100px;
  background-color: #8ebf42;
}
  • L'étape suivant est que vous devez spécifier la mise en page en définissant la propriété display. Pour utiliser Flexbox, définissez display: flex. (display: -Webkit-flex;)
#big-box {
  width: 200px;
  height: 200px;
  background-color: #666666;
  display: flex;
  display: -webkit-flex;
}

La valeur "flex" doit être utilisée avec l'extension -webkit- pour Safari, Google Chrome, et Opera..

Rien ne change lorsqu'on exécute ce code. Suivez aux étapes suivants!

  • Ajoutez la propriété align-items. La propriété align-items spécifie l'alignement vertical de contenu dans le conteneur flex. On doit définir align-items à la valeur "center" qui centre verticalement le contenu.
#big-box {
  width: 200px;
  height: 200px;
  background-color: #666666;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

Alors, maintenant essayez le code et vous allez voir que "small-box" est centré verticalement.

Passons au centrement horizontal.

  • Nous avons besoin de la propriété justify-content qui aligne le contenu horizontalement. Nous définissons justify-content à "center" et exécutons le code.
    • #big-box {
  width: 200px;
  height: 200px;
  background-color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-align-items: center;
}

    Nous y sommes arrivés!

    Exemple

    <!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #big-box {
        width: 200px;
        height: 200px;
        background-color: #666666;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-align-items: center;
      }
      #small-box {
        width: 100px;
        height: 100px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Centrer le contenu</h2>
    <div id="big-box">
      <div id="small-box"></div>
    </div>
  </body>
</html>
    -Webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions) est utilisée avec la propriété align-items.

    Voyons un autre exemple:

    Exemple

    <!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .flexbox-container {
        background: #cccccc;
        display: flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        height: auto;
        margin: 0;
        min-height: 500px;
      }
      .flexbox-item {
        max-height: 50%;
        background: #666666;
        font-size: 15px;
      }
      .fixed {
        flex: none;
        max-width: 50%;
      }
      .box {
        width: 100%;
        padding: 1em;
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Centrer le contenu</h2>
    <div class="flexbox-container">
      <div class="flexbox-item fixed">
        <div class="box">
          <h2>Centré par Flexbox</h2>
          <p contenteditable="true">Cette boîte est centrée horizontalement et verticalement.</p>
        </div>
      </div>
    </div>
  </body>
</html>

    La boîte va rester centrée même si le texte change.