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
Detaillierte Erläuterung des Vue Router Routing Guard
Inhaltsverzeichnis 1. Global vor jedem 1. Global ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Win10 Home Version 64
Als absoluter Neuling habe ich gerade angefangen,...
Detaillierte Erläuterung des Prinzips und der Praxis der MySQL-Master-Slave-Replikation
Inhaltsverzeichnis Einführung Wirkung Prinzip bil...
Detaillierte Erläuterung der Nginx-Standortkonfiguration (Standortübereinstimmungsreihenfolge)
Standort bedeutet „Positionierung“, was hauptsäch...
9 praktische Tipps zum Erstellen von Webinhaltsseiten
Inhalt 1. Geben Sie den Lesern einen Grund zu blei...
So verwenden Sie Filter zur Implementierung der Überwachung in Zabbix
Als ich kürzlich an Überwachungsgeräten arbeitete...
MySQL-Triggersyntax und Anwendungsbeispiele
Dieser Artikel veranschaulicht anhand von Beispie...
Erste Schritte mit SELinux
Bereits zu Kernel 2.6-Zeiten wurde ein neues Sich...
Nginx-Lastausgleichsalgorithmus und Failover-Analyse
Überblick Der Lastenausgleich von Nginx bietet Up...
So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen
Vorwort Vor vielen Jahren war ich ein Neuling auf...
Zusammenfassung der allgemeinen Funktionen von regulären Ausdrücken in PostgreSQL
Zusammenfassung der allgemeinen Funktionen von re...
So führen Sie das Springboot-Projekt im Docker aus
1. Klicken Sie unten in IDEA auf Terminal und geb...
JavaScript-Selektorfunktionen querySelector und querySelectorAll
Inhaltsverzeichnis 1. querySelector fragt ein ein...
Ausnahmefehler beim Packen von Webpack-Dateien
Vor dem Verpacken im Webpack müssen wir sicherste...
Detaillierte Erklärung des durch einen Schrägstrich / verursachten Mordes in Nginx proxy_pass
Hintergrund Ein Nginx-Servermodul muss als Proxy ...