CSS realisiert Div vollständig zentriert, ohne Höhe festzulegen

CSS realisiert Div vollständig zentriert, ohne Höhe festzulegen

Erfordern

  • Das Div unter dem Körper ist vertikal zentriert
  • Text im Div vertikal zentrieren
  • Die Breite und Höhe des Divs sind beide halb so breit wie der Body

analysieren

  • Es ist nicht schwierig, ein Div zu zentrieren. Verwenden Sie dazu ggf. margin oder left/top mit translate .
  • Der entscheidende Punkt ist, dass die Höhe des Divs der Hälfte des Körpers entspricht. Da der Körper keine Höhe hat, setzen Sie die Div- height： 50%； Das Ergebnis ist, dass die Höhe des Divs 0 ist.
  • Auch wenn der Körper absolut positioniert ist, sodass die Körperhöhe 100 vh beträgt, wird die Div-Höhe auf 50 % eingestellt, was nur die Hälfte der Körperhöhe und nicht die Hälfte der Breite sein kann.
  • Zu diesem Zeitpunkt müssen wir padding verwenden, da beim Festlegen des Polsterprozentsatzes die Breite des übergeordneten Containers als Referenz dient.

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        Körper{
            Polsterung: 0;
            Rand: 0;
        }
        #Kasten{
            Breite: 50%;
            /* Div zentrieren */
            Position: relativ;
            transformieren: übersetzen (50 %, 25 %);
            /* */
            /* Hier lösen wir das Problem, dass die Div-Höhe die Hälfte der Body-Breite beträgt und der Text vertikal zentriert ist*/
            Polsterung oben: 25%;
            Polsterung unten: 25 %;
            Zeilenhöhe: 0;
            Textausrichtung: zentriert;
            /* */
            Hintergrundfarbe: #111;
            Farbe: #fff;
        }
    </Stil>
</Kopf>
<Text>
    
    <div id="box">
        Postfach 123
    </div>
</body>
</html>

Wirkung

Dies ist das Ende dieses Artikels darüber, wie man CSS verwendet, um ein Div vollständig zu zentrieren, ohne eine Höhe festzulegen. Weitere Informationen dazu, wie man CSS verwendet, um ein Div vollständig zu zentrieren, ohne eine Höhe festzulegen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  JavaScript-Fehlerbehandlung try..catch...finally + umfasst throw+TypeError+RangeError

>>:  Detaillierte Erklärung der Truncate-Verwendung in MySQL

Artikel empfehlen

Detaillierte Erklärung der Lösung für das Problem der zu kleinen Ubuntu-Systemschnittstelle in vmware14Pro

1. Betriebsumgebung vmware14pro Ubuntu 16.04LTS 2...

JavaScript generiert zufällige Grafiken durch Klicken

In diesem Artikel wird der spezifische Code von J...

Detaillierte Erläuterung des Implementierungsprozesses zum Erstellen eines Kernelbaums in Ubuntu 12.04

Überprüfen Sie zunächst die von Ihnen verwendete ...

Einführung in die Apache-Bereitstellung von https in der Kryptografie

Inhaltsverzeichnis Zweck Experimentelle Umgebung ...

Ist es notwendig, einen separaten Index für die MySQL-Partitionsfeldspalte zu erstellen?

Vorwort Jeder weiß, dass das Partitionsfeld Teil ...

Die häufigste Deklarationszusammenführung in TS (Schnittstellenzusammenführung)

Inhaltsverzeichnis 1. Schnittstelle zusammenführe...

Detaillierte Erklärung der Lösung zur Schriftunschärfe bei Verwendung von Transform in CSS3

Diese Frage ist sehr seltsam, deshalb gehe ich di...

Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue

Inhaltsverzeichnis V-Modell .sync Der Unterschied...

Beispiel zum Entfernen eines JSON-Backslashs in PHP

1. Entfernen Sie Backslashes mit der Methode „str...

CSS realisiert den Sprechblaseneffekt mit scharfen Ecken im kleinen Chat-Dialogfeld mit scharfen Ecken

1. Verwenden Sie CSS, um ein kleines Chat-Dialogf...

HTML implementiert die Funktion zur Erkennung der Eingabevervollständigung

Verwenden Sie „onInput(event)“, um festzustellen,...

Unvollständige Lösung für die Verwendung von Eingabetyp=Textwert=str

Ich bin heute auf ein sehr seltsames Problem gesto...

Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker

Die Schritte zum Verpacken einer Python-Umgebung ...

Detaillierte Erklärung zur Verwendung des MySQL-Parameters sql_safe_updates in der Produktionsumgebung

Vorwort Im Falle eines Anwendungsfehlers oder ein...

Detaillierte Erläuterung des Beispiels der Caching-Methode von Vue

Kürzlich wurde die neue Anforderung „Front-End-Ca...