Comment centrer un div en HTML

Il existe deux manières de centrer un div en HTML : Utilisez l'attribut text-align (text-align: center) : adapté aux mises en page plus simples. Utiliser une mise en page flexible (Flexbox) : fournir un contrôle de mise en page plus flexible. Les étapes comprennent : l'activation de Flexbox (affichage : flex) dans l'élément parent. Définissez le div comme élément Flex (flex : 1). Utilisez les propriétés align-items et justifier-content pour le centrage vertical et horizontal.

Comment centrer un div

En HTML, vous pouvez utiliser les propriétés CSS pour centrer un div. Il existe deux méthodes :

Méthode 1 : Utiliser l'attribut d'alignement du texte

Cette méthode convient aux mises en page plus simples, utilisez l'attribut text-align : text-align 属性：

<code class="css">div {
  text-align: center;
}</code>

方法 2：使用弹性布局（Flexbox）

Flexbox 是一个 CSS 布局模块，提供更灵活的布局控制。要让一个 div 使用 Flexbox 居中，可以使用以下步骤：

1. 在父元素中启用 Flexbox：为包含 div 的父元素设置 display: flex。

<code class="css">.container {
  display: flex;
}</code>

2. 将 div 设置为 Flex 项目：为 div 设置 flex 属性，使其成为父元素的 Flex 项目。

<code class="css">div {
  flex: 1;
}</code>

3. 垂直居中：使用 align-items 属性将 div 垂直居中。

<code class="css">.container {
  align-items: center;
}</code>

4. 水平居中：使用 justify-content

   <code class="css">.container {
     justify-content: center;
   }</code>

Méthode 2 : Utiliser l'élastique mise en page (Flexbox)

Flexbox est un module de mise en page CSS qui offre un contrôle de mise en page plus flexible. Pour centrer un div à l'aide de Flexbox, procédez comme suit :

1. 🎜Activez Flexbox dans l'élément parent : 🎜Définissez display: flex pour l'élément parent contenant le div. 🎜🎜

   <code class="html"><div class="container">
     <div>这是居中的内容</div>
   </div></code>

   2. 🎜Définissez le div en tant qu'élément Flex : 🎜Définissez l'attribut flex pour le div pour en faire l'élément Flex de l'élément parent. 🎜🎜

      <code class="css">.container {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      div {
        flex: 1;
      }</code>

      3. 🎜Centrage vertical : 🎜Utilisez l'attribut align-items pour centrer verticalement le div. 🎜🎜rrreee
         4. 🎜Centrage horizontal : 🎜Utilisez l'attribut justify-content pour centrer le div horizontalement. 🎜🎜rrreee🎜🎜Exemple : 🎜🎜rrreeerrreee

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!