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

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>

Nach dem Login kopieren

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<p Klasse="Test" Stil= "Hintergrundfarbe: hellblau;Breite: 200px;">Testtextp >

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

, 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>

Nach dem Login kopieren

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

Nach dem Login kopieren

[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>

Nach dem Login kopieren

<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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

【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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Idee 5: Flex　 verwenden

[Hinweis] IE9-Browser unterstützt nicht

[ 1] Verwenden Sie margin:auto<🎜 bei Flex-Projekten >

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

Nach dem Login kopieren

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

Nach dem Login kopieren

【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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Verwandte Etiketten：

css 水平垂直居中

Quelle：php.cn

Vorheriger Artikel：Detaillierte Beschreibung der Verwendung des Stylus-CSS-Frameworks Nächster Artikel：Beschreibung der Positionierungsmethode mithilfe des Positionsattributs in CSS

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors