Zusammenfassung: Verwenden Sie CSS, um das Element auf die vertikale Mitte einzustellen

Als Front-End-Belagerungsingenieur bin ich beim Erstellen von Webseiten auf die horizontale und vertikale Zentrierung von CSS gestoßen, insbesondere die vertikale Zentrierung, die noch ärgerlicher ist Der Artikel stellt Ihnen hauptsächlich die Lösungen zur Verwendung von CSS zum Festlegen der vertikalen Zentrierung von Elementen vor. Mit diesen Methoden müssen Sie sich keine Sorgen machen.

Vorwort

Die vertikale Zentrierung von Elementen ist auch ein Problem, auf das wir in unserem täglichen Webseitenlayout häufig stoßen In Bezug auf die Lösung zur Verwendung von CSS zum Festlegen der vertikalen Zentrierung stellt der Artikel verschiedene Lösungen für verschiedene Situationen vor, die für Freunde, die auf dieses Problem stoßen, hilfreich sein werden Schauen wir uns die ausführliche Einführung an.

HTML-Code:

<p class="parent">
<p class="child">Text here</p>
</p>

Da Sie die vertikale Zentrierung des untergeordneten Elements festlegen, müssen Sie die Höhe kennen des übergeordneten Elements. Nur dann können Sie wissen, wo sich das sogenannte Zentrum befindet, oder? Wenn Sie in der Mitte einer Entfernung stehen möchten, müssen Sie zunächst wissen, wie lang die Entfernung ist Wo ist die Mitte?
Achten Sie darauf, dass alle prozentualen Höhen und Breiten auf Einstellungen wie html,body {width: 100%;height: 100%;} basieren. Wenn Sie es nicht so festlegen, ist das übergeordnete Element von p.parent, und Sie tun es nicht Wenn Sie die Breite und Höhe des Körpers nicht festlegen, können Sie den Effekt nicht sehen. Das Seitenverhältnis von .parent p ist relativ zu seinem übergeordneten Element, daher müssen Sie sicherstellen, dass die Breite und Höhe des übergeordneten Elements von . übergeordnete p werden bei der Verwendung festgelegt

(1) Inline-Text ist vertikal zentriert

CSS-Code:

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
    line-height: 100px;
}

(2) Nichttext vertikal innerhalb der Zeile zentrieren (nehmen Sie img als Beispiel)

HTML-Code:

<p class="parent">
    <img src="image.png" alt="" />
</p>

CSS-Code

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
    //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
    line-height: 100px;
}

(3) Elemente auf Blockebene unbekannter Höhe sind vertikal zentriert

HTML-Code:

<p class="parent">
  <p class="child">
    <!--.child的高度未知,父元素要有高度-->
    sddvsds dfvsdvds
  </p>
</p>

Die erste Methode (kein Auffüllen erforderlich):

CSS-Code:

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  border: 1px solid #ccc; /*设置border是为了方便查看效果*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Zweite Methode (ohne Transformation):

CSS-Code:

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

Die dritte Methode ( erfordert Auffüllen):

CSS-Code:

#parent {
  padding: 5% 0;
}
#child {
  padding: 10% 0;
}

Vierte Methode:

(verwenden Sie display: table, diese Methode eignet sich auch zum Zentrieren von Inline-Textelementen):

CSS-Code:

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

Die fünfte Methode (Flex-Layout, Kompatibilität muss hier berücksichtigt werden!)

CSS-Code:

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

(4) Elemente auf Blockebene mit bekannten Höhen werden vertikal zentriert

HTML-Code:

<p class="parent">
  <p class="child">
    <!--.child的高度已知,父元素高度已知-->
    sddvsds dfvsdvds
  </p>
</p>

CSS-Code :

#parent {
  height: 300px;
}
#child {
  height: 40px;
  margin-top: 130px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/
  border: 1px solid #ccc;
}

Die oben genannten sind einige der praktikablen Methoden, die ich entdeckt und persönlich getestet habe andere Methoden

Das obige ist der detaillierte Inhalt vonZusammenfassung: Verwenden Sie CSS, um das Element auf die vertikale Mitte einzustellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!