Welche Methoden zur vertikalen und horizontalen Zentrierung gibt es in CSS?

Dieses Mal werde ich Ihnen verschiedene Methoden zur vertikalen und horizontalen Zentrierung von CSS vorstellen und welche Vorsichtsmaßnahmen für die vertikale und horizontale Zentrierung von CSS gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

CSS-Mittelausrichtung

• Browserpräfixe werden im Code weggelassen

• Die folgenden Beispiele sind nach meinen persönlichen Maßstäben sortiert

• Natürlich gibt es noch mehr Zentriermethoden, aber ich denke, nur diese 5 Methoden sind die vollständigsten Lösungen

Flexzentrierung

Vorteile: Kann unbekannte Höhen zentrieren

<style>
    .wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
    
    .other{background-color: #ccc; width: 400px;height: 400px;} /* 额外的样式 可去除 */
</style>
<p class="wrap">
    <p class="other">
        <h2>这是第二层的内容 不会居中</h2>
    </p>
</p>

positionieren + verschieben Zentrierung

Vorteile: Kann unbekannte Höhen zentrieren, minimale Verschachtelungsebenen

<style>
    /* position 可选 absolute|fixed*/
    .center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
    
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p class="center other">
    <h2>这一层的内容 不会居中</h2>
</p>

Tischzellenzentriert

Nachteile: 1. Die zentrierte Ebene muss die Breite (.center) festlegen. 2. Die äußere Ebene ist eine Ebene verschachtelt (.cell) 3. Die mittlere Ebene muss die Breite (% zulässig) festlegen

<style>
    .wrap{display: table;width: 100%;height: 100%;}
    .cell{display: table-cell;vertical-align:middle;}
    .center{width: 400px;margin-left:auto;margin-right:auto;}
    .other{background-color: #ccc;  height: 400px;} /* 额外的样式 可去除 */
</style>
<p class="wrap">
    <p class="cell">
        <p class="center other">
            <h2>这一层的内容 不会居中</h2>
        </p>
    </p>
</p>

Traditionelle Zentrierung (2 Typen)

Nachteile: 1 . margin Der Wert muss auto sein. 2. Die mittlere Ebene muss eine feste Höhe und Breite haben (% zulässig). 3. Position

<style>
    /*
        1. left、top、right、bottom 可以任意,但必须相等
        2. position 可选 absolute|fixed
    */
    .center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin: auto;width: 400px;height: 400px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p class="center other">
    <h2>这一层的内容 不会居中</h2>
</p>

muss verwendet werden. Nachteile: Die mittlere Ebene muss eine feste Höhe und Breite haben, und Magin muss vorhanden sein berechnet sich aus Höhe und Breite.

<style>
    .wrap{position: relative;height: 100%;}
    .center{position: absolute;left: 50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top: -150px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p class="wrap">
    <p class="center other">
        <h2>这一层的内容 不会居中</h2>
    </p>
</p>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

So verwenden Sie das Neuzeichnen und Neuanordnen

Leinwand zum Erstellen einer Animation rotierenden Tai Chi

Das obige ist der detaillierte Inhalt vonWelche Methoden zur vertikalen und horizontalen Zentrierung gibt es in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!