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 :

25c91c6da56e0ff613f4eec26f5a030aLiu Fang94b3e26ee717c64999d7867364b1b4a3

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 :

7b6d85b0aa6e093a8249c39fc0694ef3

bd57cc860bfe6c93a3cd6a320a425abd94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

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 :

7b6d85b0aa6e093a8249c39fc0694ef3

bd57cc860bfe6c93a3cd6a320a425abd94b3e26ee717c64999d7867364b1b4a3
< ;/ 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 :

7b6d85b0aa6e093a8249c39fc0694ef3

c9b2e7df2121dbfc003da73882ff38f794b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

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 :

7b6d85b0aa6e093a8249c39fc0694ef3

e388a4556c0f65e1904146cc1a846bee
4d23d5c3f4b0aaf9cbeac232bb31709b
  386c1b97d2e7723c2e0ad8c0dfe6137694b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

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

复制代码 代码如下:

0ebbc079c359d962fa7d284a06740928
  801879b5b005f115d3c6e975b0a9cc7f
    a0cef87aec67cb60216160347df5d9b5我是水平垂直居中噢！94b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

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

复制代码 代码如下:

0ebbc079c359d962fa7d284a06740928
  801879b5b005f115d3c6e975b0a9cc7f我是通过flex的水平垂直居中噢！94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

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!