Explication détaillée du code sur la façon d'implémenter diverses méthodes de remplissage centrées à l'aide des attributs CSS-tutoriel CSS-php.cn

Explication détaillée du code sur la façon d'implémenter diverses méthodes de remplissage centrées à l'aide des attributs CSS

伊谢尔伦

Libérer： 2017-07-19 15:29:15

original

1967 Les gens l'ont consulté

La première consiste à centrer horizontalement Le moyen le plus simple est bien sûr

margin:0 auto;

Copier après la connexion

c'est-à-dire marge gauche et. margin- L'attribut de droite est défini sur auto pour obtenir un effet de centrage horizontal.

Et les autres moyens ?

hauteur de ligne

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

<p class="wrap">刘放</p>

Copier après la connexion

Utilisez la hauteur de ligne pour qu'elle soit identique à la hauteur :

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
   height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

Copier après la connexion

L'effet est le suivant :

rembourrage

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

<p class="parent">  
<p class="children">
</p>
</p>

Copier après la connexion

Définissez le clip d'arrière-plan 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 à la moitié de la différence entre le p extérieur moins le p intérieur :

.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;/*居中的关键*/

Copier après la connexion

L'effet est le suivant :

remplissage de la marge

Ce qui suit présente la manière de remplir les marges pour atteindre le niveau centré verticalement.
Nous définissons d'abord le parent et l'enfant p :

<p class="parent">
  <p class="children"></p>
</p>

Copier après la connexion

Ici, nous définissons la marge supérieure de l'enfant p à la hauteur du parent p moins la moitié de la taille de l'enfant p, puis mettre le débordement à 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;
}

Copier après la connexion

L'effet de centrage final est le suivant :

<🎜. >

Positionnement absolu

Utilisez position:absolute avec haut, gauche 50 %, puis définissez la marge sur une valeur négative pour centrer p horizontalement et verticalement. Tout d'abord, vous devez toujours le faire. définir le p parent et l'enfant :

<p class="parent">
  <p class="children"></p>
</p>

Copier après la connexion

puis définir 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;
}

Copier après la connexion

La valeur en marge est la moitié de la largeur p, et le rendu final est :

Centrage d'alignement de texte

Comme nous le savons tous, l'alignement de texte peut centrer le contenu d'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生效*/
}

Copier après la connexion

centrage flexible

Enfin, introduisons la méthode de centrage horizontal et vertical implémentée par display:flex en CSS3.

<p class="parent">
  <p class="children">我是通过flex的水平垂直居中噢！</p>
</p>

Copier après la connexion

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

Copier après la connexion

L'effet est le suivant :

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!