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

Detailliertes grafisches Tutorial zum Aktivieren des sicheren Remotezugriffs mit Docker

1. Bearbeiten Sie die Datei docker.service vi /us...

Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten

Inhaltsverzeichnis Stabilisierung Einführung Anti...

Centos7.5 Konfiguration Java-Umgebung Installation Tomcat Erklärung

Tomcat ist eine auf Java basierende Webserversoft...

Sonderzeichen in HTML anzeigen (mit Sonderzeichen-Korrespondenztabelle)

Reproduktion des Problems Beim Bearbeiten mit HTM...

Detaillierte Erläuterung des Tutorials zum Erstellen einer PHP-Umgebung für Docker

Docker-Installation Verwenden Sie das offizielle ...

Detaillierte Erläuterung der logischen Architektur von MySQL

1. Gesamtarchitekturdiagramm Im Vergleich zu ande...

Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/vertikale Zentrierung von Bildern)

1. IE-Browsermodus Hack-Logo 1. CSS-Hack-Logo Code...

Zusammenfassung der React-Grundlagen

Inhaltsverzeichnis Vorwort Start React-Lebenszykl...

Lösung zur Überprüfung des ID-Überlauffehlers bei automatischer Inkrementierung der MySQL-Tabelle

Problem: Der Überlauf der Auto-Increment-ID in ei...

Zusammenfassung der MySQL-Datums- und Zeitfunktionen (MySQL 5.X)

1. MySQL erhält die aktuelle Datums- und Uhrzeitf...

Lösen Sie das Problem, dass der Standardwert des CSS3-Übergangsverzögerungsattributs 0 ohne Einheit ist und ungültig ist

Heute möchte ich mit Ihnen teilen, dass der Stand...

Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung

Inhaltsverzeichnis Domänenübergreifende Gründe JS...

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

1. Fügen Sie dem HTML-Header das Viewport-Tag hin...

So implementieren Sie die Zuordnung zwischen Rahmenfenstern und die Verwendung des Zielattributs von Hyperlinks

Der Schlüssel zum Erreichen der Zuordnung des Rahm...

Ausführliche Erklärung der Modi und Umgebungsvariablen in Vue CLI

Vorwort Bei der Entwicklung tatsächlicher Projekt...