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

CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode

Viele Webseiten haben kleine Dreiecke in ihren Na...

Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue

Vorwort Bei der Projektentwicklung gibt es viele ...

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

Inhaltsverzeichnis Docker-Installation Nvidia-Doc...

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

Dadurch werden nicht nur die Kosten für die Entwic...

Verwendung von HTML zur Implementierung eines Betrugsschemas auf einer Abstimmungswebsite, das IP einschränkt

Dies ist ein Betrugsschema für Abstimmungswebsite...

JavaScript implementiert die Anzeige einer Dropdown-Box, wenn die Maus darüber bewegt wird

In diesem Artikel wird der spezifische JavaScript...

So importieren Sie Excel-Dateien in eine MySQL-Datenbank

In diesem Artikel erfahren Sie, wie Sie Excel-Dat...

Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt

Inhaltsverzeichnis Wasserwelleneffekt Sehen wir u...

Detaillierte Erklärung des Unterschieds zwischen dem Standardwert des CSS-Attributs width: auto und width: 100%

Breite: automatisch Das untergeordnete Element (e...

Verwenden von Streaming-Abfragen in MySQL, um Daten-OOM zu vermeiden

Inhaltsverzeichnis 1. Einleitung 2. JDBC implemen...

Verwenden von JavaScript zum Implementieren von Karusselleffekten

In diesem Artikel wird der spezifische Code für J...

Detaillierte Erklärung der Truncate-Verwendung in MySQL

Vorwort: Wenn wir eine Tabelle löschen möchten, v...

Verwenden von Apache ab zum Durchführen von HTTP-Leistungstests

Mac wird mit Apache-Umgebung geliefert Öffnen Sie...

Installations-Tutorial zur neuesten MySQL-Version 8.0.17 mit Dekomprimierung

Ich persönlich denke, dass die dekomprimierte Ver...

JavaScript fügt Ereignis-Listener zur Ereignisdelegierung in Batches hinzu. Detaillierter Prozess

1. Was ist Eventdelegation? Ereignisdelegierung: ...