Manuel de centrage complet vertical et horizontal CSS

Le centrage a toujours été une plainte typique en CSS. Pourquoi est-ce si difficile à mettre en œuvre ? Alors on s'est moqué de quelqu'un. Je pense que le problème n’est pas qu’il n’y a aucun moyen de le faire, cela dépend simplement de la situation. Il existe de nombreuses façons différentes, mais il est difficile de déterminer quelle méthode doit être utilisée.

J'ai donc écrit cet article, en espérant lui faciliter la tâche.

Centrer horizontalement

Centrer l'élément en ligne (inline ou inline-*) ?

Vous pouvez le centrer par rapport à l'élément parent au niveau du bloc

.center-children {
  text-align: center;
}

Élément de niveau bloc (niveau de bloc) centré ?

Vous pouvez le centrer en réglant margin-left et margin-right sur auto (et également en définissant la largeur, sinon il remplira tout le conteneur, l'effet de centrage ne peut pas être vu), comme.

.center-me {
  margin: 0 auto;
}

Et s'il y a de nombreux éléments au niveau du bloc ?

Si vous avez des éléments de niveau bloc très réguliers qui doivent être centrés horizontalement dans une rangée, il est préférable d'utiliser un type d'affichage différent. Voici un exemple utilisant inline-block et flex.

<main class="inline-block-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>
<main class="flex-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}

Centrage vertical

Le centrage vertical est un peu délicat en CSS

Les éléments en ligne (inline ou inline-*) sont centrés comme le texte et les liens de ?

Est-ce une seule ligne ?

Parfois, les éléments peuvent sembler centrés verticalement simplement parce qu'ils ont un remplissage supérieur et inférieur égal.

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Si le remplissage ne fonctionne pas pour une raison quelconque et que le texte ne s'enroule pas, vous peut utiliser la hauteur de ligne et la rendre égale à la hauteur pour aligner le texte.

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Est-ce multiligne ?

Les méthodes de remplissage telles que haut et bas peuvent également centrer plusieurs lignes, mais si cette méthode ne fonctionne pas, vous pouvez faire en sorte que les conteneurs de ces textes s'affichent en mode cellule de tableau , puis définissez le texte L'attribut vertical-align s'aligne, tout comme talbe

<table>
  <tr>
    <td>
      I&#39;m vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I&#39;m vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

Les éléments au niveau du bloc (niveau du bloc) sont centrés verticalement ?

Connaissez-vous la hauteur de l'élément ?

Il est assez courant de ne pas connaître la hauteur d'une mise en page Web pour de nombreuses raisons.

Mais si votre mise en page a une hauteur fixe, vous pouvez la centrer verticalement comme ceci :

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

La hauteur de l'élément est inconnue

Bien que cela ne soit pas connu, il vous est toujours possible d'augmenter la largeur de 50 %

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Pouvez-vous utiliser flexbox ?

Ce n'est pas surprenant, utiliser flexbox est beaucoup plus simple

<main>  
  <div>
     I&#39;m a block-level element with an unknown height, centered vertically within my parent.
  </div>  
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

Centrer horizontalement et verticalement en même temps

L'élément a une largeur et une hauteur fixes

Si l'élément a une largeur et une hauteur fixes, vous devez d'abord le centrer absolument, puis déplacez-le vers le haut et déplacez-le simplement vers la gauche de 50 % de la largeur. Cette solution offre un excellent support entre navigateurs.

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

La largeur et la hauteur de l'élément sont inconnues

Si vous ne connaissez pas la hauteur et la largeur (variables), vous pouvez utiliser l'attribut transofrm sur les deux La direction est traduite par négatif 50%

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Pour plus d'articles sur le manuel de centrage complet vertical et horizontal CSS, veuillez faire attention au site Web PHP chinois !