Beispielcode für die horizontale Zentrierung von CSS+Div

零下一度
Freigeben: 2017-06-24 11:45:28
Original
1880 Leute haben es durchsucht

Horizontale Zentrierung des Div-Inhalts erreichen

Implementierungsplan eins: margin:0 auto;

div{
     height:100px;
     width:100px;
     background:red;
     margin:0 auto;
  }
Nach dem Login kopieren

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div水平居中</title>
	</head>
	<body>
		<div></div>
	</body>
</html>
Nach dem Login kopieren

 

Lösung 2 zur horizontalen Zentrierung von div: position: absolute; absolute Positionierung

div{height:100px;width:100px;background:red;position:absolute;
   left:50%;
   right:50%;
   margin: auto;
}
Nach dem Login kopieren

Implementierung Das Div ist horizontal und vertikal zentriert

Implementierungsplan eins: Position: fest; feste Positionierung

div{height:100px;width:100px;background:red;position:fixed;left:0;top:0;bottom:0;right:0;margin:auto;
            }
Nach dem Login kopieren

Implementierungsplan zwei: Position: absolut; Positionierung

div{height:100px;width:100px;background:red;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;
            }
Nach dem Login kopieren

Implementierungsplan zwei: css3+position;

div{height:100px;width:100px;background:red;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
            }
Nach dem Login kopieren

Transformation ist ein neues Attribut von CSS3. Daher muss ein Präfix hinzugefügt werden, um die Kompatibilität mit Mobiltelefonen und anderen Browsern zu gewährleisten. Wie zum Beispiel

-ms-transform:translate(-50%,-50%); /* IE 9 */-moz-transform:translate(-50%,-50%); /* Firefox */-webkit-transform:translate(-50%,-50%);/* Safari and Chrome */-o-transform:translate(-50%,-50%); /* Opera */
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode für die horizontale Zentrierung von CSS+Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage