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
Sie werden es verstehen, nachdem Sie die Demo gesehen haben

<!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

Detaillierte Verwendung des Linux-Textsuchbefehls find

CSS verwendet Position + Rand, um die Methode der horizontalen und vertikalen Zentrierung fester Boxen zu erreichen

Detaillierte Verwendung des Linux-Textsuchbefehls find

13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

Ungewöhnliche, aber nützliche Tags in Xhtml

CSS realisiert den Sprechblaseneffekt mit scharfen Ecken im kleinen Chat-Dialogfeld mit scharfen Ecken

Vue realisiert die Palastgitterrotationslotterie

Website-Homepage-Design im Illustrationsstil Neuer Trend im Website-Design

js, um einen einfachen Bild-Drag-Effekt zu erzielen

Zwei Lösungen für das 404-Problem beim Aktualisieren des Vue-Paket-Upload-Servers

Schritte zur Überprüfung der MySQL InnoDB-Row_ID-Grenzwertüberschreitung

JavaScript-Implementierung des Verifizierungscode-Falls

Artikel empfehlen

Lösung für ungültige Nginx-Cross-Domain-Einstellung Access-Control-Allow-Origin

Verwenden Sie Visual Studio Code, um eine Verbindung zur MySql-Datenbank herzustellen und Abfragen durchzuführen

Standardmäßige Stilanordnung von HTML4.0-Elementen

5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen

mysql installer community 8.0.16.0 Installations- und Konfigurations-Grafik-Tutorial

Wie löst Vue das domänenübergreifende Problem des Axios-Request-Frontends?

So stellen Sie DoNetCore mit Nginx in der Alibaba Cloud bereit

JavaScript implementiert den Div-Maus-Drag-Effekt

Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player

MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert

Verwenden Sie xshell, um eine Verbindung zum Linux-Server herzustellen

Formel und Berechnungsmethode zur Schätzung der Server-Parallelität

Wie man die Idee von Vue nutzt, um einen Speicher zu kapseln

So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung

Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac