Comment centrer le haut et le bas en CSS ?

Comment implémenter le centrage supérieur et inférieur CSS : 1. Définissez la hauteur de ligne d'une seule ligne d'éléments en ligne égale à la hauteur de la boîte 2. Utilisez plusieurs lignes d'éléments en ligne sur l'élément parent pour définir "l'affichage" ; :table-cell; et vertical-align: middle;" suffisent.

Le centrage supérieur et inférieur en CSS est un centrage vertical. CSS peut être divisé en trois méthodes de centrage vertical par élément, qui sont des éléments en ligne sur une seule ligne et des éléments multi-lignes. line Le centrage vertical des éléments en ligne et des éléments de bloc sera présenté en détail ci-dessous.

Éléments en ligne sur une seule ligne

Il vous suffit de définir la "hauteur de la ligne égale à la hauteur de la boîte" pour le simple- élément en ligne de ligne ;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

Effet :

Éléments en ligne multilignes

sont utilisés pour les éléments parents. Définissez simplement display:table-cell; et vertical-align: middle;; Je suis un élément en ligne avec plusieurs lignes Je suis un élément en ligne avec plusieurs lignes Je suis un élément en ligne avec plusieurs lignes Je suis un élément en ligne avec plusieurs lignes Je suis un élément en ligne avec plusieurs lignes Je suis un élément en ligne avec plusieurs lignes< ;/span>

Effet :

Élément de niveau bloc

Option 1 : Utiliser le positionnement

Définissez d'abord l'élément parent sur un positionnement relatif, puis définissez l'élément enfant sur un positionnement absolu, définissez le haut du élément enfant : 50 %, c'est-à-dire rendre le coin supérieur gauche de l'élément enfant vertical Centré

Hauteur fixe : définir la marge supérieure de l'élément enfant absolu : -la moitié du px de la hauteur de l'élément ; set transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">

Hauteur indéfinie : utiliser css3 Nouvel attribut transform : translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

Effet :

Option 2 : Utiliser la disposition flexbox pour implémenter (très variable Tout va bien)

En utilisant la disposition flexbox, il vous suffit d'ajouter l'affichage des attributs : flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

à l'élément parent de l'élément de bloc à traiter. Effet :

Tutoriels associés :

Tutoriel vidéo CSS

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!