Résumé des méthodes de centrage en CSS

Cet article présente différentes méthodes de centrage en CSS. Les méthodes d'implémentation des 8 méthodes sont expliquées en détail, et il existe des rendus correspondants. Les amis dans le besoin peuvent s'y référer

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

Copier le code Le code est le suivant :

<.>margin:0 auto;

C'est-à-dire, définissez les propriétés margin-left et margin-right sur auto pour obtenir un effet de centrage horizontal.

Et les autres moyens ? Permettez-moi de les parcourir un par un :

hauteur de ligne

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

Copiez le code Le code est la suivante :

Liu Fang

Utilisez la hauteur de ligne pour la définir en hauteur :

Copier le code Le code est le suivant :

.wrap{

line-height : 200px;/*Clé de centrage vertical*/
text-align:center;

hauteur : 200px;

taille de la police : 36px;
couleur de l'arrière-plan : #ccc;
}

L'effet est le suivant :

padding Padding

Utilisez padding et background-clip pour obtenir le centrage horizontal et vertical de p :

Copiez le code Le code est le suivant :

Définissez le clip d'arrière-plan sur la zone de contenu et définissez Recadrer l'arrière-plan sur le 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 p externe moins le p interne, pour obtenir :

.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 parent et l'enfant p :

< ;/ p>

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

@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 p horizontalement et verticalement. Tout d'abord, vous devez toujours définir le parent. et enfant p :

Copier le code Le code est le suivant :

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 p, et le rendu final est :

alignement du texte centré

Comme nous le savons tous, le texte -align peut centrer le contenu dans un p horizontalement. Mais que se passe-t-il si vous souhaitez centrer le sous-p dans ce p ? Vous pouvez définir l'affichage de sub-p 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生效*/
}

Centrage de l'image

Le centrage général de l'image est le même que l'alignement du texte, en enveloppant l'image dans un p , juste définissez l'alignement du texte de p au centre.

Vous pouvez vous référer au lien ci-dessous :
Site personnel

Il existe une manière spéciale d'utiliser une image comme espace réservé pour permettre au conteneur parent de gagner en hauteur et en largeur, permettant ainsi un -50 % de décalage. Les images peuvent avoir un conteneur de référence pour les calculs de pourcentage. L'avantage est que vous ne connaissez pas la taille de l'image, et vous pouvez placer n'importe quelle image qui ne dépasse pas la taille du conteneur parent et elle sera centrée. De plus, la compatibilité est bonne et IE6 est parfaitement compatible. Le code est le suivant :

Copier le code Le code est le suivant :

 

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

L'effet est le suivant :

transform居中

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

复制代码 代码如下:

我是水平垂直居中噢！

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

flex居中

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

复制代码 代码如下:

我是通过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;
}

效果如下：

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

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!