Beispielcode für die horizontale Zentrierung von CSS+Div-HTML-Tutorial-php.cn

Beispielcode für die horizontale Zentrierung von CSS+Div

零下一度

Freigeben： 2017-06-24 11:45:28

Original

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