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.