CSS zur horizontalen und vertikalen Zentrierung von Elementen

In unserem aktuellen Projekt gibt es viele Methoden zur vertikalen Zentrierung. Auf der mobilen Seite gibt es beispielsweise viele Popup-Eingabeaufforderungen Ich hoffe, es kann allen helfen.
Ich habe viele Seiten erstellt und habe das Gefühl, dass einige Methoden relativ einfach sind und andere auf der Grundlage der tatsächlichen Situation berechnet werden müssen Die Methode, die ich in der Praxis verwendet habe, ist vielleicht nicht die umfassendste, aber die praktische Wirkung ist immer noch gut.

Hören Sie auf, Unsinn zu reden, und gehen Sie direkt zum Code:

/* 常用的三种方法 */

/* 第一种 */
div{
	width: 200px;
	height: 200px;
	margin: auto;
	background: pink;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* 第二种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}
/* 第三种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Implementieren Sie einfach den HTML-Teil direkt

Verwandte Empfehlungen:

Analyse des CSS-Steuerelement-Bildlaufleistenstils

Detailliertes Beispiel für den benutzerdefinierten CSS3-Bildlaufleistenstil

Beispiel für die CSS-Einstellung des Div-Bildlaufleistenstils

Das obige ist der detaillierte Inhalt vonCSS zur horizontalen und vertikalen Zentrierung von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!