Mehrere häufig verwendete Methoden zum Zentrieren von CSS-Boxen (Zusammenfassung)

Der Erste:

Verwenden der CSS-Positionseigenschaft

<style type="text/css">
        .div1 {
            Breite: 100px;
            Höhe: 100px;
            Rand: 1px durchgezogen #000000;
            Position: relativ;
        }

        .div2 {
            Breite: 40px;
            Höhe: 40px;
            Hintergrundfarbe: rot;
            Position: absolut;
            Rand: automatisch;
            oben: 0;
            links: 0;
            rechts: 0;
            unten: 0;
        }
    </Stil>

    <div Klasse="div1">
        <div Klasse="div2">
        </div>
    </div>

Effektbild:

Zweiter Typ:

Verwenden Sie die neuen CSS3-Attribute table-cell, vertical-align:middle;

<style type="text/css">
        .div1 {
            Breite: 100px;
            Höhe: 100px;
            Rand: 1px durchgezogen #000000;
            Anzeige: Tabellenzelle;
            vertikale Ausrichtung: Mitte;
        }

        .div2 {
            Breite: 40px;
            Höhe: 40px;
            Hintergrundfarbe: rot;
            Rand: automatisch;
        }

    </Stil>

    <div Klasse="div1">
        <div Klasse="div2">
        </div>
    </div>

Wirkung:

Der dritte Typ:

Layout mit Flexbox

<style type="text/css">
    .div1 {
        Breite: 100px;
        Höhe: 100px;
        Rand: 1px durchgezogen #000000;
        Anzeige: Flex;
        /*!*flex-direction: Spalte;*!Optional*/
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
    }

    .div2 {
        Höhe: 40px;
        Breite: 40px;
        Hintergrundfarbe: rot;
    }
</Stil>
<div Klasse="div1">
    <div Klasse="div2">
    </div>
</div>

Wirkung:

Der vierte Typ:

Verwenden des Transform-Attributs (Nachteil: HTML5-Unterstützung erforderlich)

<style type="text/css">
    .div1 {
        Breite: 100px;
        Höhe: 100px;
        Rand: 1px durchgezogen #000000;
        Position: relativ;
    }

    .div2 {
        Höhe: 40px;
        Breite: 40px;
        Hintergrundfarbe: rot;
        Position: absolut;
        oben: 50 %;
        links: 50%;
        -ms-transform: übersetzen(-50 %, -50 %);
        -moz-transform: übersetzen(-50 %, -50 %);
        -o-transform: übersetzen(-50 %, -50 %);
        transformieren: übersetzen(-50 %, -50 %);
    }
</Stil>
<div Klasse="div1">
    <div Klasse="div2">
    </div>
</div>

Effektbild:

Damit ist dieser Artikel über mehrere häufig verwendete Methoden (Zusammenfassung) zum Zentrieren einer CSS-Box abgeschlossen. Weitere Informationen zum Zentrieren einer CSS-Box finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels

>>: Einfaches Webdesign-Konzept – Farbabstimmung