Comment les propriétés CSS3 réalisent-elles un centrage horizontal et un centrage vertical ?

Comment réaliser un centrage horizontal et un centrage vertical avec les propriétés CSS3 ?

Avec le développement du web design, il devient de plus en plus important de réaliser un centrage horizontal et vertical des éléments. En CSS3, ces effets de mise en page peuvent être facilement obtenus à l'aide de certaines propriétés et techniques. Cet article présentera quelques propriétés CSS3 couramment utilisées et des exemples de code pour vous aider à obtenir des effets de centrage horizontal et vertical.

1. Centrage horizontal

1. Utilisez l'attribut text-align pour le centrage horizontal
Utilisez l'attribut text-align dans l'élément parent pour obtenir le centrage horizontal de l'élément enfant.
Exemple de code :

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

Les éléments enfants utilisant display:inline-block seront centrés horizontalement dans l'élément parent.

2. Utilisez les attributs de marge pour le centrage horizontal
Obtenez un centrage horizontal en définissant margin-left:auto et margin-right:auto pour les éléments enfants.
Exemple de code :

.parent {
  text-align: center;
}

.child {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Les éléments enfants utilisant display:block seront centrés horizontalement dans l'élément parent.

3. Utilisez flexbox pour le centrage horizontal
L'utilisation de la disposition flexbox peut obtenir un centrage horizontal de manière plus flexible.
Exemple de code :

.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* 子元素样式 */
}

Vous pouvez obtenir un centrage horizontal des éléments enfants en définissant les propriétés display:flex et justifier-content:center de l'élément parent.

2. Centrage vertical

1. Utilisez l'attribut line-height pour le centrage vertical
En définissant l'attribut line-height de l'élément parent égal à la valeur de hauteur de l'élément parent, vous pouvez obtenir le centrage vertical d'une seule ligne. de texte.
Exemple de code :

.parent {
  height: 100px;
  line-height: 100px;
}

.child {
  /* 子元素样式 */
}

En définissant l'attribut line-height égal à la valeur de hauteur de l'élément parent, le contenu de l'élément enfant sera centré verticalement dans l'élément parent.

2. Utilisez l'attribut table pour le centrage vertical
En définissant l'élément parent sur display:table et en définissant l'élément enfant sur display:table-cell, puis en utilisant vertical-align:middle pour obtenir un centrage vertical.
Exemple de code :

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

Utilisez display:table et display:table-cell pour centrer verticalement un élément enfant dans un élément parent.

3. Utilisez l'attribut transform pour le centrage vertical
Obtenez un centrage vertical en définissant l'élément parent sur position:relative, l'élément enfant sur position:absolute et en utilisant top:50% et transform:translateY(-50%).
Exemple de code :

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Utilisez transform:translateY(-50%) pour centrer verticalement l'élément enfant dans l'élément parent.

Pour résumer, en utilisant certaines propriétés et techniques CSS3, nous pouvons facilement réaliser un centrage horizontal et un centrage vertical des éléments. En fonction des besoins réels, choisissez la méthode appropriée pour obtenir l'effet de mise en page. J'espère que cet article vous sera utile.

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!