So zentrieren Sie die Seite in CSS

So zentrieren Sie die Seite mit CSS: 1. „text-align:center“ legt die horizontale Zentrierung fest. 2. Die Einstellung „dispaly:flex“ ist horizontal zentriert. 3. „display:table-cell“ legt die vertikale Zentrierung fest. 4. „position:absolute“ legt die vertikale Zentrierung fest.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Zentrierung kommt auch in CSS relativ häufig vor. Lassen Sie mich einige der bekannteren Schreibmethoden für die Zentrierung zusammenfassen. Natürlich muss es noch mehr bessere Schreibweisen geben, und Sie können mich gerne bei eventuellen Mängeln im Artikel korrigieren.

Nehmen wir nun an, dass dieses Szenario gegeben ist:

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

Die Inhaltslänge im class='child'-Div ist nicht sicher. Jetzt ist es notwendig, dieses div zu zentrieren. 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. Horizontale Zentrierung

1.1 Textausrichtung: zentrieren

Um Inline-Elemente oder Inline-ähnliche Elemente in einem übergeordneten Container auf Blockebene zu zentrieren, verwenden Sie einfach text-align: center, Diese Methode kann inline/inline-block/inline-table/inline/flex zentrieren.

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

Wenn es mehrere untergeordnete Div gibt und Sie display: inline-block festlegen, müssen Sie auf die Lücke zwischen den einzelnen Div achten. Dies ist kein Fehler , die Funktion ist so. <p></p> Wenn Sie diese Lücken beseitigen möchten, gibt es mehrere Lösungen: <h2></h2> <p>1. Entfernen Sie Leerzeichen in HTML. <strong><span style="font-size: 18px;"></span> Der Grund für den Leerraum zwischen den Elementen sind die Lücken zwischen den Tag-Segmenten. Zu diesem Zeitpunkt müssen Sie nur die Lücken zwischen <code>HTML entfernen.

Zum Beispiel gibt es bei dieser Art des Schreibens natürlich viele Möglichkeiten, sie zu schreiben. Achten Sie nur darauf, die Lücken zu entfernen, aber das Schreiben dieser Methode fühlt sich immer etwas unmenschlich an.

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

2. Verwenden Sie negative Margenwerte Der negative Wert dieser Methode ist nicht leicht zu bestimmen und hängt mit der Kontextschriftart usw. zusammen. Diese Methode ist nicht für den Einsatz in großem Maßstab geeignet.

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

3. Verwenden Sie die Schriftgröße: 0
Diese Methode kann dieses Abstandsproblem sehr einfach lösen. Sie müssen lediglich die font-size des übergeordneten div auf 0 setzen und sich dann daran erinnern Um das untergeordnete Element zu ändern, setzen Sie einfach das Attribut font-size von code>div

zurück.

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

🎜🎜4. Verwenden Sie Buchstaben- oder Wortabstände🎜🎜

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

🎜🎜🎜1.2 Anzeige: Flex🎜🎜🎜🎜🎜 Nur kompatibel mit IE10+🎜rrreee🎜2. Vertikale Zentrierung🎜🎜🎜🎜1.1Anzeige: Tischzelle🎜🎜🎜🎜 Elemente mit unterschiedlichen Höhen können vertikal zentriert werden

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Seite in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!