Comment centrer les CSS

Comment centrer CSS : 1. Pour le centrage horizontal, vous pouvez utiliser "text-align" pour les éléments au niveau du bloc, "margin" pour les éléments au niveau du bloc, et "position" et "transform" pour les éléments au niveau du bloc ; 2. Pour le centrage vertical, vous pouvez utiliser « line-height » pour les éléments en ligne, « flexbox » pour les éléments au niveau du bloc, et « position » et « transform » pour les éléments au niveau du bloc.

Dans la conception de sites Web, le centrage est une exigence très courante, notamment en matière de mise en page. CSS propose différentes méthodes pour réaliser le centrage. Examinons certaines des méthodes les plus courantes.

1. Centrage horizontal

1. Utilisez l'attribut text-align (pour les éléments de niveau bloc)

text-align pour centrer horizontalement le texte interne des éléments de niveau bloc, tels que p, h1, h2 et autres balises. L'exemple de code est le suivant ：

div {
text-align: center;
}

2. Utilisez margin (pour les éléments au niveau du bloc)

attribut margin pour centrer horizontalement les éléments au niveau du bloc. et marges droites sur auto, exemple Le code est le suivant :

div {
margin: 0 auto;
}

3 Utiliser position et transform (pour les éléments de niveau bloc)

L'attribut position et l'attribut transform peuvent. Pour obtenir un centrage horizontal des éléments au niveau du bloc, l'attribut de position doit être défini sur absolu ou fixe, puis utiliser l'attribut de transformation pour traduire l'élément de 50 % vers la gauche. L'exemple de code est le suivant :

div {
position : absolue ;
gauche : 50 % ;
transformation : traduireX (-50 %);
}

2. pour les éléments en ligne) L'attribut

line-height peut centrer verticalement les éléments en ligne. Définissez simplement la valeur de line-height sur la hauteur du conteneur. L'exemple de code est le suivant :

div {

height: 100px;

line. -height: 100px;
}


2. Utilisez flexbox (pour les éléments au niveau du bloc)

flexbox est une méthode de mise en page introduite dans CSS3, qui peut facilement réaliser le centrage vertical des éléments. Vous devez définir display: flex sur le. conteneur, puis utilisez align-items: center centre l'élément verticalement. L'exemple de code est le suivant :

.container {

display: flex;

align-items: center;
justifie-content: center;
}


3. Utilisez position et transform (pour les éléments au niveau du bloc)

.

Attribut de position et L'attribut de transformation peut également réaliser un centrage vertical de l'élément. Vous devez définir l'attribut de position sur absolu ou fixe, puis utiliser l'attribut de transformation pour traduire l'élément vers le haut de 50 %. L'exemple de code est le suivant :

div {

position : absolue;

top : 50 %;
transform : translateY(-50%) ;
}


Résumé :

Il existe plusieurs façons ci-dessus de réaliser le centrage dans CSS, chacun d'eux présente des avantages et des inconvénients, et dans différentes situations, vous pouvez choisir la méthode appropriée pour atteindre vos objectifs. Dans le même temps, les navigateurs modernes prennent de mieux en mieux en charge CSS3, et l’utilisation de la disposition flexbox de CSS3 est également un choix très pratique.

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!