CSS verwendet Position + Rand, um die Methode der horizontalen und vertikalen Zentrierung fester Boxen zu erreichen
|
Rand: automatisch; + Position: absolut; oben, unten, links und rechts: 0
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="Anfangsmaßstab=1,0, Maximalmaßstab=1,0, benutzerdefiniert skalierbar=nein" />
<title>Verwenden Sie Position + Rand, um die Box horizontal und vertikal zu fixieren</title>
<Stil>
Körper * {
Umriss: 1px #ff0000 durchgezogen;
}
.Vater {
Breite: 500px;
Höhe: 300px;
Position: relativ;
}
.Vater .Sohn {
Breite: 180px;
Höhe: 140px;
/* */
Position: absolut;
rechts: 0;
unten: 0;
oben: 0;
links: 0;
Rand: automatisch;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Vater">
<div class="son">margin:auto + hoch, runter, links und rechts:0</div>
</div>
</body>
</html>//Ende Dies ist das Ende dieses Artikels über die Verwendung von Position + Rand in CSS, um eine horizontale und vertikale Zentrierung einer festen Box zu erreichen. Weitere relevante Inhalte zur horizontalen und vertikalen Zentrierung einer festen Box in CSS 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! |
<<: Docker stellt Mysql, .Net6, Sqlserver und andere Container bereit
>>: Sublime Text - Empfohlene Methode zum Festlegen von Browser-Tastenkombinationen
Artikel empfehlen
Eine "klassische" Falle der MySQL UPDATE-Anweisung
Inhaltsverzeichnis 1. Problematische SQL-Anweisun...
So rufen Sie die Browser-Sharing-Funktion in Vue auf
Vorwort Vue (ausgesprochen /vjuː/, ähnlich wie vi...
Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?
Vorwort Wie wir alle wissen, legt die Nginx-Konfi...
Gutes Website-Copywriting und gute Benutzererfahrung
Das Betrachten einer Website ist eigentlich wie di...
CSS, um den Übergangsanimationseffekt des Bildes zu erzielen, wenn die Maus darauf platziert wird
Code <div Klasse="Test"> <div&...
Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung
Inhaltsverzeichnis 1. Vue2-Syntax 2. Nutzung von ...
Centos7 installiert mysql5.6.29 Shell-Skript
In diesem Artikel wird das Shell-Skript von mysql...
Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker
Problemphänomen: [root@localhost ~]# Docker-Image...
JavaScript-Canvas zum Erzielen eines Spiegelbildeffekts
In diesem Artikel wird der spezifische Code für J...
Verhindern von SQL-Injection in Webprojekten
Inhaltsverzeichnis 1. Einführung in SQL-Injection...
So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue
Bei der Verwendung von Vue zur Entwicklung von Pr...
Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.
Vorwort Ich hatte kürzlich ein Problem bei der Ar...
Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt
Inhaltsverzeichnis Vorwort Fall: Nachahmung des L...
JS Canvas-Oberfläche und Animationseffekte
Inhaltsverzeichnis Überblick Canvas API: Grafiken...
Implementierung von proxy_pass im Nginx-Reverse-Proxy
Das Format ist einfach: Proxy_Pass-URL; Die URL u...