Comment centrer verticalement le HTML

Pour les développeurs front-end, le centrage horizontal est relativement simple, mais le centrage vertical est un problème plus difficile. Dans cet article, nous verrons comment centrer verticalement des éléments en HTML.

En général, il existe de nombreuses façons de centrer verticalement un élément HTML. Ci-dessous, nous explorons quelques-unes de ces méthodes.

1. Utiliser Flexbox

Flexbox (disposition de boîte flexible) est l'une des dernières méthodes de mise en page de CSS3 et constitue une méthode de centrage extrêmement pratique. L'idée principale de Flexbox est de créer une boîte élastique dans le conteneur, puis de contrôler les propriétés de la boîte élastique pour obtenir un centrage horizontal et vertical. Voyons comment utiliser Flexbox pour réaliser un centrage vertical :

Code HTML :

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Code CSS :

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dans cet exemple, nous définissons d'abord une hauteur pour le conteneur, puis définissons le mode d'affichage du conteneur. à Flexbox. Et utilisez les propriétés justifier-content et align-items pour centrer l'élément verticalement et horizontalement. Il est à noter que cette méthode ne fonctionne que pour un simple centrage vertical.

2. Utiliser le positionnement absolu

Le positionnement absolu est une méthode courante. En utilisant le positionnement absolu, vous pouvez centrer un élément verticalement par rapport à son élément parent. L'implémentation spécifique est la suivante :

Code HTML :

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Code CSS :

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dans cet exemple, nous définissons d'abord la position : relative pour le conteneur, puis définissons la position : absolue pour l'élément enfant et définissons l'attribut top à 50 %. De cette façon, l’élément enfant est centré verticalement. Cependant, il y aura un espace blanc supplémentaire en haut de cet élément. Pour éliminer cet espace blanc, nous utilisons transform:translateY(-50%), qui le traduit de la moitié de sa hauteur afin que l'élément soit exactement centré verticalement.

3. Utilisez table-cell

Utiliser table-cell équivaut à convertir des éléments HTML en éléments de tableau. table-cell peut réaliser un centrage horizontal et vertical simple, mais il est relativement encombrant. Jetons un coup d'œil à la méthode d'implémentation spécifique :

Code HTML :

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Code CSS :

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dans cet exemple, nous définissons d'abord le mode d'affichage du conteneur sur tableau, puis définissons la hauteur et la largeur du conteneur. à la taille souhaitée, l'alignement du texte est réglé au centre (en le centrant horizontalement). Ensuite, nous définissons le mode d'affichage de l'élément enfant sur table-cell et obtenons un centrage vertical via l'attribut vertical-align.

4. Utiliser la disposition en grille

CSS Grid Layout est une méthode de mise en page puissante qui nous permet de créer rapidement et efficacement des mises en page de type grille, y compris un centrage horizontal et vertical. L'implémentation spécifique est la suivante :

Code HTML :

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Code CSS :

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dans cet exemple, nous utilisons d'abord display:grid pour définir le mode d'affichage du conteneur sur la disposition en grille. Nous utilisons ensuite la propriété place-items pour le centrer horizontalement et verticalement. Cette méthode étant encore relativement nouvelle, elle n’est pas encore suffisamment performante en termes de compatibilité avec les navigateurs.

Résumé

Dans cet article, nous avons exploré plusieurs façons courantes d'obtenir un centrage vertical en HTML. Chacune de ces méthodes présente des avantages et des inconvénients, et vous pouvez choisir la méthode appropriée en fonction de la situation et des besoins réels. S'il s'agit simplement d'un simple centrage vertical, alors l'utilisation de Flexbox ou du positionnement absolu est relativement simple et efficace. Pour des mises en page plus complexes, vous pouvez utiliser CSS Grid Layout.

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!