Une brève discussion sur plusieurs méthodes pour réaliser le centrage vertical des éléments à l'aide de CSS

Utilisez CSS pour centrer horizontalement l'élément. Les éléments au niveau de la ligne définissent le centre d'alignement du texte de leurs éléments parents et les éléments au niveau du bloc définissent. leur propre gauche Réglez simplement les marges de droite sur auto. Cet article rassemble six méthodes de centrage vertical d’éléments à l’aide de CSS, jetons-y un coup d’œil !

Méthode de hauteur de ligne

Essai : texte sur une seule ligne centré verticalement, démo

Code :

html

<p id="parent">
    <p id="child">Text here</p>
</p>

css

#child {
    line-height: 200px;
}

Centrer verticalement une image, le code est le suivant

html

<p id="parent">
    <img src="image.png" alt="" />
</p>

css

#parent {
    line-height: 200px;
}
#parent img {
    vertical-align: middle;
}

Méthode de table CSS

Applicable : Universel, démo

Code :

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

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

Correction d'un bug d'IE version basse :

#child {
    display: inline-block;
}

Positionnement absolu et marge négative

Applicable : éléments de niveau bloc, démo

Code :

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Positionnement et étirement absolus

Applicable : universel, mais non disponible lorsque IE la version est inférieure à 7 Fonctionne normalement, démo

code :

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Rembourrage supérieur et inférieur égal

Applicable : Universel, démo

Code :

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {
    padding: 5% 0;
}
#child {
    padding: 10% 0;
}

Floater p

Applicable : Universel, démo

Code :

html

<p id="parent">
    <p id="floater"></p>
    <p id="child">Content here</p>
</p>

css

#parent {height: 250px;}
#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#child {
    clear: both;
    height: 100px;
}

Les six méthodes ci-dessus peuvent être raisonnable en utilisation réelle. Sélectionnez.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !