Comment centrer un bloc à l'écran en CSS

👋 Aujourd'hui, nous allons parler de la façon de placer un élément au centre de l'écran à l'aide de CSS. Si vous avez récemment commencé votre parcours en programmation, ne vous inquiétez pas : tout sera expliqué de manière très simple et accessible !

Lorsque vous créez une page Web, vous devez parfois placer un élément, tel qu'un bloc de texte ou une image, directement au centre de l'écran. Cela rend le design plus agréable et plus convivial pour les utilisateurs. Voyons comment faire ! 🌉

Pourquoi placer le bloc au centre ?

Placer un bloc au centre est une technique très courante dans la conception de sites Web. Le centrage des éléments rend la page plus équilibrée et attire l'attention sur les informations importantes. Par exemple, le site peut avoir un formulaire de connexion et vous voulez qu'il se démarque immédiatement. Dans ce cas, il est pratique de le placer en plein centre.

Le centrage des blocs contribue également à rendre la page conviviale, car les éléments clés ne sont pas cachés quelque part dans les coins.

💡 Principales méthodes de centrage du bloc

Il existe plusieurs façons de placer un bloc au centre de l'écran à l'aide de CSS. Nous examinerons les plus populaires d'entre eux, qui conviendront même à ceux qui viennent de commencer à apprendre le développement Web.

1. Centrage avec Flexbox

Flexbox est l'un des moyens les plus pratiques de centrer les éléments, et il convient même aux débutants. Voyons comment faire :

<div class="wrapper">
  <div class="box">Я по центру! 👌</div>
</div>

Et voici à quoi ressemblera le CSS pour cette tâche :

.wrapper {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center;   /* Центрирование по вертикали */
  height: 100vh;         /* Высота экрана */
}

.box {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}

Que se passe-t-il ici ? 🤔

• display: flex; fait de l'élément un conteneur Flexbox.

• justify-content: center; place le bloc horizontalement.

• align-items: center; place le bloc verticalement.

• height: 100vh; indique que la hauteur du conteneur est égale à la hauteur de l'écran entier.

Ainsi, le bloc se trouve exactement au centre !

2. Utilisation du positionnement

Une autre façon simple est d'utiliser le positionnement absolu et les propriétés de retrait. Voici un exemple :

<div class="box">Центр! 🚀</div>

Et CSS :

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #add8e6;
  padding: 20px;
  border-radius: 10px;
}

• position: absolute; indique au navigateur que le bloc doit être positionné par rapport au conteneur le plus proche avec un positionnement relatif.

• top: 50%; left: 50%; déplacer le bloc vers le centre.

• transform: translate(-50%, -50%); corrige la position du bloc de sorte que le centre de l'élément coïncide avec le centre de l'écran.

Cette méthode est bonne car elle est facile à comprendre et à appliquer, en particulier pour les tâches simples.

Comment travailler avec ces méthodes ?

Pour travailler efficacement avec l'alignement, vous devez comprendre un peu les propriétés CSS de base, telles que Flexbox, positionnement, et retraits. Avec l'expérience, vous apprendrez à choisir la méthode la plus appropriée en fonction de la tâche.

Flexbox est pratique pour le design moderne, car il ajuste automatiquement les éléments, et le positionnement avec transform permet de positionner avec précision l'élément dans n'importe quelle partie de l'écran.

Exemple pratique 🚀

Voyons un autre exemple que vous pouvez essayer vous-même :

<div class="center-wrapper">
  <h1>Добро пожаловать на мой сайт!</h1>
  <p>Этот текст находится точно по центру экрана. Попробуйте сами! 💪</p>
</div>

.center-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ffebcd;
  text-align: center;
}

Ici, nous avons ajouté flex-direction: column; pour placer le texte verticalement, et text-align: center; pour aligner le texte.

🛍️ Conclusion

Vous savez maintenant comment placer un bloc au centre de l'écran de plusieurs manières ! C'est la base du développement Web, et ces compétences vous seront certainement utiles. Essayez de les mettre en pratique, vous apprendrez ainsi plus rapidement et comprendrez quelle méthode est la mieux adaptée aux différentes tâches.

Si vous souhaitez vous plonger dans le développement Web et apprendre de nouvelles techniques, écrivez-nous ! Nous pouvons créer un mini-cours qui rendra votre apprentissage simple et amusant. 🎓