Quelles sont les méthodes courantes d'implémentation du centrage horizontal et vertical en CSS ? Trois méthodes courantes de centrage horizontal et vertical en CSS

Cet article vous présente quelles sont les méthodes courantes d'implémentation du centrage horizontal et vertical en CSS ? Trois méthodes de centrage horizontal et vertical courantes en CSS ont 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.

Lorsque la largeur et la hauteur de l'élément enfant ne sont pas connues, comment réaliser le centrage horizontal et vertical de l'élément enfant ? Voici plusieurs méthodes :

Utiliser le positionnement et la transformation pour y parvenir ?

Le code HTML et CSS est le suivant :

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

Le cœur de cette implémentation réside dans la partie commentaire Lorsque le positionnement relatif, en haut et à gauche sont calculés par rapport à la hauteur et à la largeur de. l'élément parent et la transformation Il est calculé par rapport à sa propre largeur et hauteur ; l'effet est le suivant :

2. Utilisez la disposition des cellules du tableau pour implémenter

Les codes HTML et CSS sont implémentés comme suit :

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

L'élément parent est défini sur une disposition en tableau et l'élément enfant est défini sur une disposition en cellules de tableau. Réalisez ensuite le centrage vertical et horizontal des éléments enfants, l'effet est le suivant :

3. Utilisez la mise en page flexible pour implémenter

Le HTML et le CSS le code est le suivant :

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

L'effet est le suivant :

Articles connexes recommandés :

Deux façons utiliser des tableaux en CSS (exemples)

Quel est le concept de mise en page multi-colonnes ? Application de la mise en page multi-colonnes CSS (exemple de code)

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!