Plusieurs méthodes de centrage CSS

Dans la conception Web, le centrage est très important tant pour l'esthétique que pour la lisibilité. En CSS, il existe de nombreuses façons de réaliser le centrage. Voici quelques méthodes couramment utilisées.

1. Centrage du texte

1. Centrez le texte des éléments en ligne

Pour le texte sur une seule ligne, nous pouvons utiliser l'attribut text-align pour terminer le centrage.

<div style="text-align: center;">这里是居中的文本</div>

2. Centrage du texte des éléments de bloc

Pour le texte multiligne ou les éléments de bloc, nous pouvons utiliser l'attribut margin pour définir les marges gauche et droite sur automatique et définir la largeur sur non 100 % pour terminer le centrage.

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. Centrage des éléments

1. Centrage horizontal

Utilisez l'attribut margin et définissez les marges gauche et droite sur automatique pour terminer le centrage horizontal.

<div style="margin: 0 auto;"></div>

2. Centrage vertical

La méthode de centrage vertical est plus compliquée et il existe de nombreuses façons de la mettre en œuvre.

(1) Utilisez Flexbox

pour définir display:flex et align-items:center sur l'élément parent pour obtenir un centrage vertical.

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) Utilisez table-cell

pour définir display:table et vertical-align:middle sur l'élément parent, et définissez display:table-cell sur l'élément enfant pour obtenir un centrage vertical.

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3) Utilisez Absolute

pour définir la position:absolute;top:50%;left:50% et transform:translate(-50%,-50%) sur l'élément enfant pour obtenir un centrage vertical.

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) Utilisez line-height

Définissez la hauteur et la hauteur de la ligne égales sur l'élément parent, et définissez vertical-align:middle sur l'élément enfant pour obtenir un centrage vertical.

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

Grâce aux méthodes ci-dessus, nous pouvons facilement obtenir l'effet de centrage des éléments dans les pages Web. Il est nécessaire de choisir la méthode appropriée en fonction de la situation spécifique pour obtenir de meilleurs effets visuels sur la page.

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!