CSS-Lösung zum Zentrieren von Elementen mit variabler Breite und Höhe

1. Horizontale Mitte

Öffentlicher Code:

html:

<div Klasse="übergeordnet">
    Elternteil
    <br>
    <div Klasse="Kind">
        Kind
    </div>
</div>

CSS:

html, Text {
    Rand: 0;
    Breite: 100 %;
    Höhe: 100%;

    .übergeordnet {
        Breite: 100 %;
        Höhe: 100%;
        Hintergrund: #fac3fa;
        
        .Kind {
            Breite: 50%;
            Höhe: 50%;
            Hintergrund: #fe9d38;
        }
    }
}

Lösung 1: Textausrichtung (übergeordnet) + Inline-Block (untergeordnet)

Code:
CSS:

.übergeordnet {
    Textausrichtung: zentriert;

    .Kind {
        Anzeige: Inline-Block;
    }
}

Lösung 2: Elemente auf Blockebene + Rand: 0 auto;

.Kind {
    Anzeige: Block; // Rand festlegen: 0 automatisch für Elemente, die sich nicht auf Blockebene befinden;
}

Lösung 3: absolut + transform

.übergeordnet {
    Position: absolut;
    links: 50%;
    transformieren: übersetzenX(-50%);
}

Option 4: Flex

Hinweis: Aufgrund der Verwendung von Flex werden hier übergeordnete Elemente und <br> entfernt.

.übergeordnet {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
}

2. Vertikale Zentrierung

Öffentlicher Code:
html:

<div Klasse="übergeordnet">
    <div Klasse="Kind"></div>
</div>

CSS:

html, Text {
    Rand: 0;
    Breite: 100 %;
    Höhe: 100%;
}
.übergeordnet {
    Anzeige: Tabellenzelle;
    Breite: 800px;
    Höhe: 500px;
    Hintergrund: #fac3fa;

    .Kind {
        Breite: 50%;
        Höhe: 50%;
        Hintergrund: #fe9d38;
    }
}

Lösung 1: Tabellenzelle (übergeordnet) + vertikale Ausrichtung (untergeordnet)

.übergeordnet {
    Anzeige: Tabellenzelle;
    vertikale Ausrichtung: Mitte;
}

Lösung 2: absolut + transform

.übergeordnet {
    Position: relativ;
    
    .Kind {
        Position: absolut;
        oben: 50 %;
        transformieren: verschiebeY(-50%);
    }
}

Option 3: Flex

.übergeordnet {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
}

3. Horizontale und vertikale Zentrierung

Öffentlicher Code ist derselbe wie [vertikale Mitte]

Gemeinsame Lösung 1: absolut + transformieren

.übergeordnet {
    Position: relativ;
    
    .Kind {
        Position: absolut;
        oben: 50 %;
        links: 50%;
        transformieren: übersetzen(-50 %, -50 %);
    }
}

Gemeinsame Lösung 2: Flex

.übergeordnet {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Detaillierte Erklärung der XML-Syntax

>>: Beispiele für die Verwendung der Operatoren && und || in JavaScript