Quelles sont les méthodes de centrage horizontal et vertical en CSS ? (exemple de code)

Ce que cet article vous apporte, c'est quelles sont les méthodes de centrage horizontal et vertical en CSS ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Méthode CSS pure de centrage vertical

1 Basé sur la position : absolue (mais le positionnement absolu se détachera du flux du document et n'est pas convivial pour les éléments frères)

1. position : absolue ; haut : 50 % ; marge-haut : -50px ; marge-gauche :

2. absolu; top : 0;right:0;bottom: 0;left: 0;

Les deux tailles de div ci-dessus sont claires

3. position : absolue ; haut : 50 %;gauche : 50 %;

2. La taille n'est pas claire

4.

5. affichage : tableau, (détruira la mise en page globale de la page)

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

       <div class="wrapper">
        
    <div class="box">adfagagafajkfhla</div>
   
     </div>

Quelles sont les méthodes de centrage horizontal et vertical du CSS ? (Exemples de code) introduction complète, si vous souhaitez en savoir plus sur les Tutoriels vidéo CSS, veuillez faire attention au site Web PHP chinois.

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!