Comment réaliser un centrage horizontal de largeur variable en CSS

Méthode : 1. Utilisez la mise en page flexible et définissez les attributs ustify-content et align-items sur center pour obtenir le centrage ; 2. Utilisez les attributs de transformation et de position pour obtenir le centrage ; 3. Utilisez table-cell et utilisez Table ; effet de centrage cellulaire.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version css3, cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

css pour réaliser un centrage horizontal de largeur variable

Méthode 1 : Utiliser la flexibilité

La première réaction de chacun peut être la flexibilité. 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 afin que le seul élément enfant puisse être centré.

Méthode 2 : Utilisez la combinaison transformation + position

, qui est souvent utilisée pour centrer l'image.

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

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

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.

Méthode 3 : tableau-cellule

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

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

rrree

Méthode 4 : 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.

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

rrree

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.

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

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!