CSS 9 façons d'obtenir un centrage vertical et horizontal avec une largeur et une hauteur variables (informations sèches)

Il existe des flex, transformation, absolu, etc. Il existe également une disposition en grille CSS3. Il existe également des méthodes pseudo-éléments Oui, vous avez bien lu, ::after et ::before peuvent également réaliser le centrage.

1. flex

La première réaction de chacun peut être flex. Parce que sa méthode d’écriture est assez simple et intuitive, et qu’il n’y a aucun problème de compatibilité. C'est le premier choix pour le centrage sur les téléphones mobiles.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Utilise 2 attributs clés : justifier-contenu et align-items, les deux sont définis sur centre pour obtenir le centrage.

Il est à noter que le flex-center doit ici être accroché à l'élément parent pour centrer le seul élément enfant.

2. flex + margin

Il s'agit d'une variante de la méthode flex. L'élément parent est défini sur flex et l'élément enfant est défini sur margin: auto;. On peut comprendre que les éléments enfants sont « pressés » au milieu par les marges environnantes.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

rrree

3. transformation + absolu

Cette combinaison est souvent utilisée pour centrer l'image.

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
}
.wrapper > p {
    margin: auto;
}

<div class="wrapper">
    <img src="test.png">
</div>

Bien sûr, vous pouvez également déplacer le positionnement relatif du wrapper de l'élément parent dans l'élément enfant img, en remplaçant le positionnement absolu. L'effet est le même.

4. table-cell

Utilisez l'effet de centrage des cellules du tableau pour afficher. Comme flex, il doit être écrit sur l'élément parent.

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

rrree

5. Absolu + Les valeurs dans les quatre directions sont égales

Utilisez la disposition de positionnement absolu, définissez margin:auto; et définissez haut, gauche, à droite, en bas Les valeurs doivent seulement être égales (elles ne doivent pas nécessairement toutes être 0).

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

rrree

Cette méthode est généralement utilisée pour les calques contextuels, et la largeur et la hauteur du calque contextuel doivent être définies.

6. mode d'écriture

Cette méthode peut changer la direction d'affichage du texte, par exemple en changeant la direction d'affichage du texte en direction verticale.

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

rrree

Il existe encore quelques défauts mineurs de compatibilité, mais la plupart des navigateurs, y compris les téléphones mobiles, prennent déjà en charge le mode écriture.

7. grille

Comme les tableaux, la disposition en grille nous permet d'aligner les éléments par lignes ou colonnes. Cependant, en termes de disposition, les grilles sont plus possibles ou plus simples que les tableaux.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Mais ce n'est pas aussi bon que flex en termes de compatibilité, notamment avec le navigateur IE, qui ne prend en charge que IE10 et supérieur.

8. Les pseudo-éléments ::after

peuvent-ils également être utilisés pour réaliser le centrage ? Cela semble assez magique, regardez l'exemple suivant :

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>

rrree

La direction horizontale est facile à comprendre. Dans le sens vertical, cela peut être compris comme :: après avoir tiré l'image vers le milieu.

9. ::before

L'autre est la magie qui s'effectue avec font-size: 0;. Le secret de

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    writing-mode: vertical-lr;
    text-align: center;
}
.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}

rrree

font-size: 0; est qu'il élimine les espaces entre les balises. De plus, comme les pseudo-éléments correspondent aux méthodes d’écriture CSS les plus basiques, il n’y a aucun risque de compatibilité.

Tutoriel recommandé : "Tutoriel 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!