Discutez des différentes méthodes de centrage en CSS_CSS/HTML

Utilisez line-height pour le régler en hauteur :

L'effet est le suivant :

rembourrage

Utilisez le remplissage et le background-clip pour obtenir le centrage horizontal et vertical des div :

En définissant backgroun-clip sur content-box, recadrez l'arrière-plan jusqu'au bord extérieur de la zone de contenu, puis utilisez le remplissage pour le définir sur la moitié de la différence entre le div externe moins le div interne :

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

L'effet est le suivant :

remplissage de marge

Ensuite, nous présenterons la méthode de remplissage des marges pour réaliser un centrage horizontal et vertical.
Nous définissons d’abord le div parent-enfant :

Ici, nous définissons la marge supérieure du div enfant à la hauteur du div parent moins la moitié de la hauteur du div enfant, puis définissons le débordement sur caché pour déclencher le BFC du div parent. Le code LESS est. comme suit :

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

L'effet de centrage final est le suivant :

positionnement absolu

Utilisez position:absolute avec top, left 50%, puis définissez la marge sur une valeur négative pour centrer le div horizontalement et verticalement. Tout d'abord, vous devez toujours définir les divs parent et enfant :

Puis définissez le css correspondant :

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

La valeur en marge est la moitié de la largeur du div. Le rendu final est :

alignement du texte centré

Comme nous le savons tous, l'alignement du texte peut centrer le contenu d'un div horizontalement. Mais que se passe-t-il si vous souhaitez centrer le div enfant dans ce div ? Vous pouvez définir l’affichage du div enfant sur inline-block.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

图片居中

一般的图片居中都是和text-align一样，将图片包装在一个div中，将该div的text-align设为center即可。
可以参考下面的链接：
个人站点

有一种特殊的方式，利用了一个图片进行占位，以让父容器获得高宽，从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，IE6都是能顺利兼容的。代码如下：

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

效果如下：

transform居中

上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。
先上代码：

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

效果如下：

首先我们利用float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。
再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform : translate3d(0, -50%, 0);
这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

效果如下：

这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。

以上就是本文的全部内容，希望大家可以喜欢。