Manuel de centrage complet vertical et horizontal CSS-tutoriel CSS-php.cn

Manuel de centrage complet vertical et horizontal CSS

高洛峰

Libérer： 2017-02-04 16:01:47

original

1288 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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; 的盒子模型则需要设置这个 */
}

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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