Plusieurs méthodes pour réaliser un centrage horizontal et un centrage vertical en CSS

Méthode 1 : centrer horizontalement et verticalement les éléments de texte et de ligne

{
    text-align: center; // 水平居中
    line-height： 盒子高度； // 垂直居中，只适合行元素
}

Avantages : simple et pratique ;

Inconvénients : convient uniquement aux lignes simples de texte et au contenu des éléments de ligne ;

Méthode 2 : Centrez la boîte en fonction de la largeur et de la hauteur connues de la boîte ;

{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px; // 盒子的一半高度
    margin-left: -100px; // 盒子的一半宽度
}

// 以上代码可优化为下方代码：
{
    position: absolute;
    width: 200px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
}

Avantages : Les éléments de ligne et les éléments de bloc peuvent être centrés ;

Inconvénients : Nécessité de fixer la largeur et la hauteur de la boîte ;

Méthode 3 : Utiliser le positionnement absolu + la transformation CSS pour centrer la boîte

{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Avantages : Les éléments de rangée et les éléments de bloc peuvent être centrés, et il n'est pas nécessaire de fixer la largeur et la hauteur de la boîte ;

Inconvénient : Lorsque la hauteur de la boîte dépasse la hauteur de l'écran, le haut de la boîte sera rogné par la fenêtre ; [Viewport : représente la largeur et la hauteur de l'écran vues visuellement]

Méthode 4 : utiliser la disposition flexible pour centrer la boîte

// 父盒子
{
    display: flex;
}
// 子盒子
{
    margin: auto;
}

Avantages : Mise en œuvre simple, pas besoin de définir la taille de la boîte parent ou de la boîte enfant ;

Inconvénients : certains navigateurs de versions inférieures peuvent ne pas le prendre en charge ;

Méthode 5 : utilisez les attributs vertical-align + line-height pour centrer verticalement

.div {
    width: 364px;
    height: 221px;
    line-height: 221px;
    text-align: center;
    img {
      vertical-align: middle;
      width: 48px;
      height: 48px;
    }
  }

Avantages : Simple et pratique à mettre en œuvre, similaire à la méthode 1 ;

Inconvénient : Besoin de connaître la hauteur du conteneur parent, adapté au centrage vertical des images en divs ;

Le contenu ci-dessus est la méthode de centrage que j'ai résumée lors du développement. Toute similitude est purement fortuite ! De plus, s’il y a des erreurs, merci de les signaler !