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

Konfliktlösung bei gleichzeitiger Verwendung von Laufschrift und Flash auf einer Seite

Das Hauptsymptom des Konflikts besteht darin, dass...

Beispiel für die Implementierung bidirektionaler Nachrichten zwischen übergeordneten und untergeordneten Seiten in einem HTML-Iframe

Eines Tages stellte der Leiter die Anforderung, e...

Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)

2.1 Semantisierung sorgt dafür, dass Ihre Webseit...

Vue implementiert nahtloses Scrollen von Listen

In diesem Artikelbeispiel wird der spezifische Co...

Beispiele für MySQL-Batch-Hinzufügungs- und Speichermethoden

Beim Anmelden am Stresstest sind viele verschiede...

Lösen Sie das Problem der Verkleinerung des Mysql-Transaktionsprotokolls und der Protokolldateien, die zu groß zum Verkleinern sind

1. MS SQL SERVER 2005 --1. Löschen Sie das Protok...

Detaillierte Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL

In MySQL kann das Problem der Groß- und Kleinschr...

VMware Workstation 14 Pro installiert CentOS 7.0

Die spezifische Methode zur Installation von Cent...

Detaillierter Prozess zum Erstellen von MongoDB und MySQL mit Docker-Compose

Schauen wir uns die detaillierte Methode zum Erst...

Beispiele für die Verwendung von DD DT DL-Tags

Normalerweise verwenden wir die Tags <ul><...

CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

Die Bildintegrationstechnologie, die von YAHOO in...

Implementierungsschritte zum Erstellen eines lokalen Webservers auf Centos8

1 Übersicht System CentOS8, verwenden Sie httpd, ...

Tipps für die effiziente Nutzung von CSS-Stylesheets: Nutzen Sie die Leistungsfähigkeit von Stylesheets voll aus

Mit der kontinuierlichen Entwicklung der Internetw...

Mysql-Optimierungstechniken zum Abfragen von Daten basierend auf der Zeit

Um beispielsweise die gestern neu registrierten B...

Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung

Ich habe das System vor einiger Zeit neu installi...