4 häufig verwendete CSS-Methoden zum Erreichen einer vertikalen Zentrierung

Dieses Mal stelle ich Ihnen 4 häufig verwendete CSS-Methoden vor, um eine vertikale Zentrierung zu erreichen. Was sind die Vorsichtsmaßnahmen für CSS, um eine vertikale Zentrierung zu erreichen?

ZeilenhöheZeilenhöheVertikale Zentrierung einer einzelnen Textzeile erreichen

Das wurde schon immer gedacht dass die vertikale Zentrierung einer einzelnen Textzeile die Höhe erfordert. Stellen Sie den gleichen Wert wie die Zeilenhöhe ein, es besteht jedoch keine Notwendigkeit, die Höhe festzulegen. Tatsächlich erscheint der Text selbst zentriert auf einer Zeile. Ohne eine Höhe festzulegen, erweitert die Zeilenhöhe die Höhe.

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p>测试文字</p>

Einstellungenvertikal-align:middle erreicht vertikale Zentrierung

【1】Stellen Sie die Anzeige des übergeordneten Elements auf Tabellenzelle ein

Durch Festlegen von Vertical-Align:Middle für das Tabellenzellenelement und seine untergeordneten Elemente lässt sich eine gleichmäßige vertikale Zentrierung erreichen. Dies ähnelt der vertikalen Zentrierung von Zellen in Tabellen

[Hinweis] Wenn der IE7-Browser dies unterstützt, können Sie es in ändern.

[Hinweis] Der p-Satz zur Tabellenzelle kann keine schwebende oder absolute Positionierung verwenden, da durch die schwebende oder absolute Positionierung das Element Elementeigenschaften auf Blockebene aufweist und dadurch die vertikale Ausrichtungsfunktion des Tabellenzellenelements verloren geht.

Wenn eine schwebende oder absolute Positionierungsverarbeitung erforderlich ist, muss eine weitere p-Schicht außerhalb platziert werden.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>   

[2] Wenn das untergeordnete Element ein Bild ist, legen Sie die Zeilenhöhe des übergeordneten Elements anstelle der Höhe fest und legen Sie die Schriftart fest. Größe des übergeordneten Elements auf 0 .

Vertical-Alignment: Die Erklärung von middle ist, dass der Mittelpunkt des Elements an der Grundlinie des übergeordneten Elements plus der Hälfte der Höhe des Buchstabens X im übergeordneten Element ausgerichtet ist. Da das Zeichen X im Geviertfeld nicht vertikal zentriert ist und die oberen und unteren Positionen des Zeichens

Wenn also die Schriftgröße größer ist, ist der Unterschied deutlicher. Wenn die Schriftgröße 0 ist, entspricht dies dem Festlegen der Schriftgröße des Zeichens X auf 0, sodass eine vollständige vertikale Zentrierung erreicht werden kann.

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p>
  <img  alt="4 häufig verwendete CSS-Methoden zum Erreichen einer vertikalen Zentrierung" >  
</p>

【3】Erzielen Sie einen vertikalen Zentrierungseffekt durch Hinzufügen neuer Elemente

Legen Sie die Höhe des neuen Elements als übergeordnetes Element fest Die Höhe und Breite der Ebene beträgt 0, und das vertikal zentrierte Inline-Block-Element „vertikal-align:middle“ ist ebenfalls festgelegt. Da der Abstand zwischen den beiden Elementen analysiert wird, müssen Sie die Schriftgröße auf der übergeordneten Ebene festlegen und dann die Schriftgröße auf der untergeordneten Ebene auf den erforderlichen Wert festlegen. Wenn die strukturellen Anforderungen nicht streng sind, können Sie sie anzeigen Wenn Sie die beiden Elemente in einer Zeile zusammenfassen, ist es nicht erforderlich, die Schriftgröße: 0 festzulegen.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i> 

Idee 3: Vertikale Zentrierung durch absolute Positionierung

[1] Wenn das untergeordnete Element kein festes hat Höhe, verwenden top50% In Kombination mit translatorY(-50%) kann der Zentrierungseffekt erzielt werden.

Der Prozentsatz der Übersetzungsfunktion ist relativ zu ihrer eigenen Höhe, sodass top:50% in Kombination mit TranslateY(-50%) den Zentrierungseffekt erzielen kann.

[Hinweis] IE9-Browser unterstützt nicht

[Hinweis] Wenn die Höhe des untergeordneten Elements bekannt ist, kann die Funktion Translate() auch durch margin-top ersetzt werden: a negativer Höhenwert.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p>
  </p><p>测试文字</p>

[2] Wenn die Höhe des untergeordneten Elements fest ist, kombinieren Sie das Modellattribut „Absolute Positionierungsbox“, um den Zentrierungseffekt zu erzielen

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p>
  </p><p>测试文字</p>

< ;Informationen zum Erhöhen des p-Levels Beschreibung>

Legen Sie bei horizontaler Mittelausrichtung eine Ebene von p auf die äußere Ebene des Elements, legen Sie „Absolut“ fest und legen Sie das Attribut „Rand links“ oder „Relativ negativ links“ des Elements fest um den horizontalen Zentriereffekt zu erzielen. Da der Rand jedoch relativ zur Breite des enthaltenden Blocks ist, erhält margin-top:-50 % die Breite statt -50 % der Höhe, sodass dies für den relativen Prozentwert, die Höhe des enthaltenden Blocks, nicht möglich ist ist auto In diesem Fall unterstützen Chrome-, Safari- und IE8+-Browser das Festlegen des prozentualen Spitzenwerts des Elements nicht, daher ist dies nicht möglich.

Idee 4: Verwenden Sie das Flex-Box-ModellFlex, um eine vertikale Zentrierung zu erreichen

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p>
    </p><p>测试文字</p>   

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>   

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

focus-within的使用详解

CSS3做出无缝轮播广告

Das obige ist der detaillierte Inhalt von4 häufig verwendete CSS-Methoden zum Erreichen einer vertikalen Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!