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

PHPzavant: 2023-09-03 12:01:021393parcourir

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

Nous pouvons centrer un dc6dce4a544fdca2df29d5ac0ea9906b 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 dc6dce4a544fdca2df29d5ac0ea9906b à 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>

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属性来居中一个dc6dce4a544fdca2df29d5ac0ea9906b。我们只需要使用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!

css if using Property this display viewport flex

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quels caractères sont valides dans les noms/sélecteurs de classe CSS ?Article suivant：Quels caractères sont valides dans les noms/sélecteurs de classe CSS ?

Articles Liés

Voir plus