4 façons d'obtenir un centrage horizontal et vertical en CSS

Cet article partage principalement avec vous 4 façons de réaliser un centrage horizontal et vertical du CSS. Dans le plan, j'ai également donné la largeur et la hauteur, mais cela ne veut pas dire que la largeur et la hauteur sont fixes. Mais je pensais que je ne pouvais pas voir l'effet sans donner de la largeur et de la hauteur. Le fait que cette solution ne fixe pas la largeur et la hauteur signifie qu'après avoir utilisé cette solution, si la largeur et la hauteur de votre élément parent et de votre élément enfant changent, la position de centrage horizontale et verticale peut toujours être garantie.

Les quatre solutions suivantes sont toutes réalisables. Lorsque la largeur et la hauteur de l'élément parent ou de l'élément enfant changent, la disposition centrée horizontale et verticale est toujours conservée.

Option 1 : Positionnement

html

         <p class="father">
            <p class="son"></p>
         </p>

css

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }

Option 2 : flex

html inchangé

        <p class="father">
            <p class="son"></p>
        </p>

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

Option 3 : la disposition du tableau

doit définir l'élément parent pour display:table-cell et utiliser vertical et text-align pour créer tous les éléments au niveau du bloc Inline sont centrés horizontalement et verticalement
Définir l'affichage pour les éléments enfants : inline-block

html inchangé

  <p class="father">
        <p class="son"></p>
    </p>

css

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

Option 4 : disposition en grille (supportée par les derniers navigateurs)

html reste inchangé

        <p class="father">
            <p class="son"></p>
        </p>

css reste inchangé

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

Recommandations associées :

Comment définir le centrage horizontal et vertical des éléments HTML

Partage de code sur la manière d'obtenir un centrage et un alignement horizontal et vertical aux deux extrémités en CSS

Introduction à plusieurs méthodes pour réaliser un centrage horizontal et vertical avec 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!