Ausführliche Erläuterung von 5 Ideen für CSS, um gleichzeitig eine horizontale und vertikale Zentrierung zu erreichen

Der unten stehende Editor liefert Ihnen eine kurze Analyse von 5 Ideen, wie Sie mithilfe von CSS gleichzeitig eine horizontale und vertikale Zentrierung erreichen können. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und es als Referenz verwenden.

Die horizontale Zentrierung und die vertikale Zentrierung werden separat vorgestellt Führen Sie gleichzeitig eine horizontale und vertikale Zentrierung ein

Idee 1: text-align + line-heightum eine horizontale und vertikale Zentrierung von einzeiligem Text zu erreichen

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. a5612efdd9b4a40d6efd98c546bda11cTesttextdc9304036da22c433ea2772439378168

Idee 2: Textausrichtung + Vertikalausrichtung

【1】Legen Sie Textausrichtung und Vertikalausrichtung für das übergeordnete Element fest und stellen Sie das übergeordnete Element auf ein das Tabellenzellenelement und das untergeordnete Element zum Inline-Block-Element

[Hinweis] Wenn es mit dem IE7-Browser kompatibel ist, ändern Sie die Struktur in f5d188ed2c074f8b944552db028f98a1, um den Effekt einer Tabellenzelle zu erzielen ; verwenden Sie display:inline;zoom:1; um den Effekt von inline-block

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>

<p class="parent" style="background-color: gray; width:200px; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

[2] zu erreichen Untergeordnetes Element ist ein Bild, table-cell kann nicht verwendet werden, aber sein übergeordnetes Element verwendet Zeilenhöhe anstelle von height und die Schriftgröße ist auf 0 gesetzt. Das untergeordnete Element selbst legt „vertikal-align:middle“ fest

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>

<p class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>

Drei Ideen: margin + Vertical-Alignment　

Wenn Sie Vertical-Alignment im übergeordneten Element festlegen möchten, müssen Sie es auf das Table-Cell-Element setzen, wenn Sie möchten, dass margin:0 automatisch horizontal ausgerichtet wird Zentrierter Blockelementinhalt. Die Breite muss auf das Tabellenelement eingestellt werden. Das Tabellenelement kann im Tabel-Cell-Element verschachtelt werden, genau wie eine Zelle eine Tabelle verschachteln kann

[Hinweis] Wenn es mit dem IE7-Browser kompatibel ist, muss die Struktur in

<style>   
.parent{   
    display:table-cell;   
    vertical-align: middle;   
}   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Idee 4: Verwendung absolute

[1] Nutzen Sie die Box-Modell-Funktion absolut positionierter Elemente und legen Sie margin:auto basierend darauf fest, dass das Offset--Attribut
bestimmt ist Wert.

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 0;   
    left: 0;   
    rightright: 0;   
    bottombottom: 0;   
    height: 50px;   
    width: 80px;   
    margin: auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

【2】Verwenden Sie das Offset-Attribut absolut positionierter Elemente und das Translate() FunktionDer eigene Versatz erzielt den Effekt der horizontalen und vertikalen Zentrierung

[Hinweis] IE9-Browser unterstützt

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%,-50%);   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

nicht

【3】Wenn die Breite und Höhe des untergeordneten Elements bekannt sind, können Sie negative Randwerte verwenden, um den horizontalen und vertikalen Zentrierungseffekt zu erzielen

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 80px;   
    height: 60px;   
    margin-left: -40px;   
    margin-top: -30px;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Idee 5: Flex　 verwenden

[Hinweis] IE9-Browser unterstützt nicht

[ 1] Verwenden Sie margin:auto

<style>   
.parent{   
    display: flex;   
}   
.child{   
    margin: auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

【2】Verwenden Sie die Hauptachsenausrichtung „justify-content“ und die Querachsenausrichtung „align-items“. der skalierbare Container

<style>   
.parent{   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Der obige Artikel analysiert kurz die 5 CSS-Ideen, um horizontale und Gleichzeitig hoffe ich, dass dies der gesamte Inhalt ist, den der Herausgeber mit Ihnen geteilt hat. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von 5 Ideen für CSS, um gleichzeitig eine horizontale und vertikale Zentrierung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!