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

Aujourd'hui, nous parlerons principalement des différentes méthodes de centrage en CSS.
La première est de centrer horizontalement . Le moyen le plus simple est bien sûr de

.

Copier le code Le code est le suivant :

marge:0 auto;

Autrement dit, définissez les propriétés margin-left et margin-right sur auto pour obtenir un effet de centrage horizontal.

Et les autres moyens ? Laissez-moi vous raconter un par un :

hauteur de ligne

Introduisez d'abord la méthode de centrage horizontal du texte :

Copier le code Le code est le suivant :

6bab83cd2ea3b0bfa059c0c27e19c040Liu Fang< ;/ div>

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

Copier le code Le code est le suivant :

.wrap{
hauteur de ligne : 200 px ;/*clé centrale verticale*/
text-align:center;

hauteur : 200px ;
taille de police : 36 px ;
couleur d'arrière-plan : #ccc;
>

L'effet est le suivant :

rembourrage

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

Copier le code Le code est le suivant :

b428c3c18a70c3fd9550e96bb117dafa
5cdbb4c8e6efc0234d97e61cec9cd29b16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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 :

b428c3c18a70c3fd9550e96bb117dafa
5cdbb4c8e6efc0234d97e61cec9cd29b16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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 :

.

Copier le code Le code est le suivant :

b428c3c18a70c3fd9550e96bb117dafa
5cdbb4c8e6efc0234d97e61cec9cd29b16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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都是能顺利兼容的。代码如下：

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  e388a4556c0f65e1904146cc1a846bee
    dbe8b9bd8f9910749c751d9fd062a542
    5e4eb8fa85f3b4e9592f8a12d6aea5a194b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

.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水平垂直居中方法。
先上代码：

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  6789779472ec455614b5679ffeb5bae3
    c029628396f6f9ca1b5558ef22d8b6d9我是水平垂直居中噢！16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

.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来实现的水平垂直居中的方法。

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  6789779472ec455614b5679ffeb5bae3我是通过flex的水平垂直居中噢！16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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;
}

效果如下：

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

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