[CSS] Les éléments de positionnement sont affichés au centre

1. Utilisez la marge

p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;}

pour analyser  :

• top : 50 % ; gauche : 50 % ; Centrer le coin supérieur gauche de l'élément verticalement et horizontalement dans l'élément parent

• margin-top : -50px margin-; left: -50px ;Décalez l'élément vers le haut et vers la droite de la moitié de sa distance

2. Utilisez traduire

p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

Analyse :

• haut : 50 % à gauche : 50 % ; Centrer le haut à gauche de l'élément verticalement et horizontalement ; dans l'élément parent

• transform: translation(-50%, -50%); Déplace l'élément vers le haut et vers la droite sur la moitié de sa distance

3. Les quatre directions sont 0, utilisez la marge pour positionner

p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right : 0;
    margin: auto;}

Analyse :

• Lorsque les quatre directions sont à 0, elles s'annulent et la boîte s'affichera à la position initiale

• margin: auto; centrez la boîte verticalement et horizontalement

Pour plus d'articles liés à l'affichage centré [CSS] des éléments de positionnement, veuillez faire attention au site Web PHP chinois !