Comment centrer un <div> à l'aide de la propriété Flexbox de CSS ?-tutoriel CSS-php.cn

Comment centrer un

à l'aide de la propriété Flexbox de CSS ?

PHPz

Libérer： 2023-09-03 12:01:02

avant

1491 Les gens l'ont consulté

如何使用 CSS 的 Flexbox 属性使 <div> 居中？

Nous pouvons centrer un

en CSS en utilisant la propriété justifier-content et la propriété align-item de flexbox. Ils sont populaires car ils sont réactifs et faciles à utiliser. Dans cet article, nous apprendrons comment centrer

à l'aide des propriétés Flexbox.

使用 align-items et justification-content 属性

使用flexbox的最流行的居中div的方法是结合justify-content et align-items属性。

justify-content属性会水平居中对齐div。
align-items属性将div垂直居中对齐。

Si vous souhaitez centrer l'alignement dans une seule direction, c'est-à-dire verticalement ou horizontalement, nous ne devons en utiliser qu'une seule parmi les propriétés que nous avons mentionnées.

Utilisez les éléments d'alignement et le contenu de justification pour centrer l'enfant horizontalement et verticalement.

Exemple

<!DOCTYPE html>
<html lang="en">
<style>
   .parent{
      border: 2px solid green;
      height:30vh;
      width:30vw;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: orange;
   }
   .child{
      border: 2px solid red;
      height:10vh;
      width:10vw;
      background-color: yellow;
   }
</style>
</head>
<body>
   <div class="parent">
      <div class="child">
         This is the child element.
      </div>
   </div>
</body>
</html>

Copier après la connexion

Dans le code, l'élément parent est une boîte orange bordée de vert avec une hauteur de 30 % de la hauteur de la fenêtre d'affichage et une largeur de 30 % de la largeur de la fenêtre d'affichage. Le parent est centré horizontalement et verticalement à l'aide de " display : flex", "flex-direction: row", "justify-content: center" et "align-items: center."
要使用align-items et justifier-content，我们首先需要使用display属性声明元素为flexbox。子元素是一个高度为视口高度10%, 10% de réduction黄色盒子，放置在父元素内部。

结论

在本文中，我们了解了如何使用CSSflexbox属性来居中一个

。我们只需要使用flexbox的justify-content et align-content属性就可以实现相同的效果。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：tutorialspoint.com

Article précédent：Quels caractères sont valides dans les noms/sélecteurs de classe CSS ? Article suivant：Quel est le but de la directive @content ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur