6 solutions de centrage horizontal et vertical CSS

Cet article vous présente principalement les informations pertinentes sur les solutions de centrage horizontal et vertical CSS (6 types). L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Préparer

Créer un élément

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

Solution de centrage vertical et horizontal 1 : Valeur négative absolue + marge lorsque la largeur est connue

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  background: yellow;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}

Solution de centrage vertical et horizontal deux : absolu+transformation

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

sans connaître la largeur et la hauteur. Solution de centrage vertical trois : position+marge:auto

.parent {
  position:relative;
  width:200px;
  height:200px;
  background: red;
}
.child {
  width:80px;
  height:40px;
  background: yellow;
  position: absolute;
  left:0;
  top:0;
  right:0 ;
  bottom:0;
  margin:auto;
}

Solution de centrage vertical quatre : + Centrage vertical du texte multiligne : table-cell+vertical-align:middle;

.parent {
    height: 300px;
    width:400px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
  display: inline-block;
  width:50px;
  height:50px;
  background: blue;
}
/* 或者 */
.parent {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

Solution de centrage vertical cinq : affichage : flex

.parent {
  width:400px;
  height:200px;
  background:red;
  display: flex;
  justify-content:center;
  align-items:center;
}
.child {
  height:100px;
  width:100px;
  background:green;
}

Centrage vertical Option 6 : Pseudo-élément

.parent {
  width:200px;
  height:200px;
  background:red;
  text-align: center;
}
.child {
  height:100px;
  width:100px;
  background:yellow;
  display: inline-block;
  vertical-align: middle;
}
.parent:before {
  content:"";
  height:100%;
  vertical-align: middle;
  display: inline-block;
}

Recommandations associées :

4 façons d'implémenter le centrage horizontal et vertical CSS

éléments html Comment configurer le centrage horizontal et vertical

Partage de code sur la façon d'obtenir un centrage et un alignement horizontal et vertical aux deux extrémités avec CSS

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!