So zentrieren Sie ein Element vertikal

Methoden zum vertikalen Zentrieren eines Elements: 1. Zentrieren Sie ein einzeiliges Inline-Element vertikal über das Attribut „line-height“. 2. Verwenden Sie das Flex-Layout, um eine vertikale Zentrierung zu erreichen „Um zu erreichen, dass Elemente auf Blockebene vertikal zentriert sind.

Vertikal zentriert

1. Einzeilige Inline-Elemente sind vertikal zentriert

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2. Mehrzeilige Inline-Elemente vertikal zentrieren

①Verwenden Sie das Flex-Layout (Flex)

Verwenden Sie das Flex-Layout, um eine vertikale Zentrierung zu erreichen, wobei Flex-Richtung: Spalte die Hauptachsenrichtung als vertikal definiert . Bei dieser Methode gibt es Kompatibilitätsprobleme mit älteren Browsern.

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②Verwenden Sie das Tabellenlayout (Tabelle)

Verwenden Sie Vertical-Align: Middle des Tabellenlayouts, um eine vertikale Zentrierung untergeordneter Elemente zu erreichen

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 Elemente auf Blockebene sind vertikal zentriert

①Verwenden Sie einen absoluten + negativen Rand (bekannte Höhe und Breite)

Indem Sie das Element absolut 50 % von oben positionieren und „margin-top“ festlegen, um es zu versetzen Höhe des Elements nach oben Die Hälfte davon kann erreicht werden.

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②Verwenden Sie absolute + Transformation

Wenn die Höhe und Breite des vertikal zentrierten Elements unbekannt sind, können Sie das Transformationsattribut in CSS3 verwenden, um einen umgekehrten Versatz der Y-Achse um 50 % zu erreichen Vertikalität Zentriert. Bei einigen Browsern treten jedoch Kompatibilitätsprobleme auf.

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③Flex+align-items verwenden

Durch das Setzen des Attributs align-items im Flex-Layout werden die untergeordneten Elemente vertikal zentriert.

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④Verwenden Sie table-cell+vertical-align

, um das übergeordnete Element anzuzeigen, indem Sie es in eine Tabellenzelle konvertieren (ähnlich wie und ) und dann festlegen Vertical -align-Attribut, um den Inhalt der Tabellenzelle vertikal zu zentrieren.

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

Empfohlenes Lernen: „Front-End-Video“

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Element vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!