Comment centrer de haut en bas en CSS

CSS est un langage utilisé pour la conception Web et est largement utilisé dans la mise en page et le style des pages Web. Dans la conception Web, un problème très courant est de savoir comment obtenir une mise en page centrée de haut en bas. Cet article présentera plusieurs méthodes en CSS qui peuvent vous aider à obtenir facilement l'effet de centrage en haut et en bas.

Méthode 1 : Utiliser display:flex

display:flex est une nouvelle méthode de mise en page en CSS3, qui peut rapidement obtenir divers effets de mise en page complexes. Il peut également être utilisé pour obtenir l'effet de centrer le haut et le bas.

Code HTML :

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

Code CSS :

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

.child {
  text-align: center;
}

Méthode d'analyse :

Utilisez display:flex pour obtenir un centrage en haut et en bas. Tout d'abord, vous devez définir l'élément parent sur une mise en page flexible, puis définir le contenu justifié : center et align-items : l'attribut center permet d'obtenir respectivement des effets de centrage horizontal et vertical.

Dans le code ci-dessus, la hauteur de l'élément parent est définie sur 400px, qui peut être ajustée selon les besoins. L'attribut text-align:center des éléments enfants peut centrer le contenu du texte horizontalement.

Méthode 2 : Utiliser la position : absolue

L'utilisation de la position : absolue peut également obtenir l'effet de centrer le haut et le bas. Cependant, il convient de noter que cette méthode convient aux éléments de hauteur connue, car les propriétés margin-top et margin-bottom de l'élément doivent être définies.

Code HTML :

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

Code CSS :

.parent {
  position: relative;
  height: 400px;
}

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

Méthode d'analyse :

Utilisez position:absolute pour obtenir le centrage haut et bas. Tout d'abord, vous devez définir l'élément parent sur position:relative, puis définir l'attribut position. de l'élément enfant en absolu. De cette façon, l'élément enfant peut être positionné par rapport à l'élément parent. Ensuite, utilisez top:50% pour déplacer le bord supérieur de l'élément enfant vers le milieu de l'élément parent. Cependant, vous devez toujours ajuster la position de l'élément enfant. Vous pouvez utiliser translateY(-50%) dans la transformation. L'élément est déplacé vers le haut de 50 % de sa hauteur, obtenant ainsi l'effet de centrer le haut et le bas.

Il convient de noter que la hauteur de l'élément parent dans le code ci-dessus est définie sur 400 px uniquement à des fins de démonstration. Dans les applications réelles, elle doit être ajustée en fonction de la situation réelle.

Méthode 3 : Utiliser table-cell

En CSS, table-cell est une méthode de disposition des cellules de tableau Bien qu'elle ne soit pas très couramment utilisée, elle permet d'obtenir une disposition plus précise.

Code HTML :

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

Code CSS :

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 400px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

Méthode d'analyse :

Utilisez table-cell pour obtenir le centrage en haut et en bas. Vous devez définir l'attribut d'affichage de l'élément parent sur table-cell et définir le texte-. Les attributs align:center et vertical -align:middle permettent d'obtenir respectivement des effets de centrage horizontal et vertical. Il convient de noter que la hauteur de l'élément parent doit être définie, sinon le centrage haut et bas ne pourra pas être réalisé.

L'attribut display de l'élément enfant doit être défini sur inline-block, et l'attribut vertical-align:middle doit également être défini de manière à ce que l'élément enfant soit centré verticalement par rapport à l'élément parent. L’avantage de cette méthode est qu’elle permet d’obtenir une disposition plus précise et qu’elle convient à une variété d’éléments dont les hauteurs sont connues.

Pour résumer, il existe de nombreuses façons d'obtenir l'effet de centrage supérieur et inférieur, et les situations applicables sont également différentes. Vous pouvez choisir la méthode de mise en œuvre appropriée en fonction de besoins spécifiques.

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!