Comment centrer la page en CSS

Comment définir le centre de la page en CSS : 1. "text-align:center" définit le centrage horizontal. 2. Le paramètre « display:flex » est centré horizontalement. 3. "display:table-cell" définit le centrage vertical. 4. "position:absolute" définit le centrage vertical.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Le centrage est également relativement courant en CSS. Permettez-moi de résumer certaines des méthodes de centrage que je connais. Bien sûr, il doit y avoir de meilleures façons d'écrire, et vous êtes invités à me corriger en cas de lacunes dans l'article.

Supposons maintenant que ce scénario soit donné :

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

La longueur du contenu dans le div class='child' n'est pas certaine. Il faut maintenant centrer ce div. class='child'这个div中的内容长度是不一定的，现在需要实现这个div的居中。

一、水平居中

1.1text-align: center

在块级父容器中让行内元素或者类行内元素居中，只需使用text-align: center，
这种方法可以让inline/inline-block/inline-table/inline/flex居中。

.child {
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

当有多个child div的时候如果设置display: inline-block的时候需要注意每个div之间会有缝隙，这不是什么bug，特性就是如此。

如果想去掉这些缝隙的话，有几种解决方法：

1、去掉HTML中的空格。

元素之间留白间距出现的原因是因为标签段之间的空隙，这个时候只需要去除掉HTML之间的空隙就好了。

比如这种写法，当然写法也有很多种，只要保证把空隙去掉就可以了，但是这种方法总觉得写起来有点反人类。

<p class="parent">
  <p class="child">
  DEMO1</p
  ><p class="child">
  DEMO2</p
  ><p class="child">
  DEMO3</p>
</p>

2、使用margin负值

这种方法这个负的值不太好确定，和上下文的字体等等都有关，这种方法不太适合大规模的使用。

.child {
  margin-right; -5px;
}

3、使用 font-size: 0

这种方法能十分简单地这个间距问题，只需要将父div的font-size设为0 ，然后记得将子div的font-size

1. Centrage horizontal

1.1 alignement du texte : centre

Pour centrer un élément en ligne ou un élément de type en ligne dans un conteneur parent au niveau du bloc, utilisez simplement text-align: center, Cette méthode peut centrer inline/inline-block/inline-table/inline/flex.

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

Lorsqu'il y a plusieurs child div, si vous définissez display: inline-block, vous devez faire attention à l'écart entre chaque div. Ce n'est pas un bug. < /code>, la fonctionnalité est comme ça. <p></p> Si vous souhaitez supprimer ces lacunes, il existe plusieurs solutions : <h2></h2><p>1 Supprimer les espaces en HTML. <strong><span style="font-size: 18px;"></span> La raison de l'espace blanc entre les éléments est due aux espaces entre les segments de balises. Pour le moment, il vous suffit de supprimer les espaces entre <code>HTML.

Par exemple, cette façon d'écrire, bien sûr, il existe de nombreuses façons de l'écrire, assurez-vous simplement de supprimer les espaces, mais cette méthode semble toujours un peu anti-humaine à écrire.

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

2. Utilisez des valeurs de marge négatives La valeur négative de cette méthode n'est pas facile à déterminer et elle est liée à la police contextuelle, etc. Cette méthode n'est pas adaptée à une utilisation à grande échelle.

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

3. Utilisez la taille de police : 0
Cette méthode peut résoudre ce problème d'espacement très simplement. Il vous suffit de définir le font-size du div parent sur 0, puis de vous en souvenir. pour changer l'enfant < Il suffit de redéfinir l'attribut font-size de code>div.

.parent {
  display:table-cell;
  vertical-align:middle;
}

🎜🎜4. Utilisez l'espacement des lettres ou l'espacement des mots🎜🎜

.parent {
  position:relative;
}
.child{
  position:absolute;
  top:50%;   /* 参照物是父容器 */
  transform:translateY(-50%); /*百分比的参照物是自身 */

🎜🎜🎜1.2 affichage : flex🎜🎜🎜🎜🎜 Uniquement compatible avec IE10+🎜rrreee🎜2. Centrage vertical🎜🎜🎜🎜Affichage 1.1 : table-cell🎜🎜🎜🎜 Les éléments de différentes hauteurs peuvent être centrés verticalement🎜rrreee🎜🎜🎜Position 2.2 : absolue🎜🎜🎜rrreee🎜Apprentissage recommandé : 🎜Tutoriel vidéo 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!