6 solutions de centrage horizontal et vertical CSS-tutoriel CSS-php.cn

6 solutions de centrage horizontal et vertical CSS

小云云

Libérer： 2018-02-23 09:32:00

original

2028 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!