Comment définir div pour qu'il soit centré par rapport à la page Web en CSS

Comment définir le div pour qu'il soit centré par rapport à la page Web à l'aide de CSS : 1. Utilisez la disposition absolue "position:absolute;" pour le div et définissez les valeurs du haut, de la gauche, de la droite et du bas. égal ; 2. Utilisez une disposition absolue pour le div, et mettez en haut et en bas Les valeurs de gauche sont toutes définies sur "50%" 3. Centrez le div via l'attribut de transformation de css3.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment paramétrer le div pour qu'il soit centré par rapport à la page web en css ?

Css pour centrer le div

1. Utilisez la disposition absolue "position:absolute;" pour le div

Méthode 1 : Utilisez la position absolue pour le div et définissez les valeurs​​ de haut, gauche, droite et bas Égal, mais pas nécessairement égal à 0 ; et définissez margin:auto

{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2 Utilisez la disposition absolue pour le div et définissez les valeurs du haut et de gauche​​à 50 % ;

.

Méthode 2 : Cette méthode nécessite de connaître la largeur et la largeur du haut du div. Utilisez la position de mise en page absolue : absolue pour le div ; et définissez les valeurs du haut et de la gauche sur 50 % ; 50 % fait référence à 50 % de la largeur et de la hauteur de la fenêtre de la page. Enfin, déplacez le div vers la gauche et le haut ; , à gauche et en haut La taille est la moitié de la largeur et de la hauteur du div

{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

3 Le div est centré via l'attribut transform de CSS3.

Méthode 3 : Utilisez le positionnement absolu du div : absolu, et définissez les valeurs de gauche et de haut à 50 %. Utilisez l'attribut de transformation CSS3. transform: translation (-50%, -50%)

{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}

S'il y a deux div et que le plus petit div à l'intérieur est aligné horizontalement, verticalement et centré par rapport au plus grand div à l'extérieur, il existe plusieurs méthodes.

1. Utilisez position et margin:auto pour réaliser. L'élément parent définit la position : relative ; l'élément enfant définit la position : absolue et définit les valeurs supérieure, gauche, droite et inférieure pour qu'elles soient égales.

父元素{
position：relative；

}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2. Utilisez la position. L'élément parent définit la position : relative ; l'élément enfant définit la position : absolue. Et réglez haut et gauche à 50 %, et réglez à gauche et jusqu'à la moitié de la taille de l'élément enfant

父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

Utilisez display: flex. Cette méthode nécessite les paramètres de compatibilité du navigateur.

{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}

3. Utilisez transform: translation(). L'élément parent définit la position : relative ; l'élément enfant définit la position : absolue. Et réglez en haut et à gauche à 50 %. Enfin, définissez la transformation : traduire (-50%, -50%)

父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}

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