Heim >Web-Frontend >CSS-Tutorial >So zentrieren Sie die Anzeige von CSS-Div
So zentrieren Sie die CSS-Div: 1. Verwenden Sie die absolute absolute Positionierung, der Code lautet [
absolute Mittelpositionierung] 2. Verwenden Sie die Positionierung des Randes, um sie zu zentrieren. 4. Verwenden Sie die feste Mittelpositionierung.
So zeigen Sie CSS-Div in der Mitte an:
1. Absolute Positionierung Dies ist die am häufigsten verwendete Methode zur zentrierten Positionierung. Derzeit müssen Browser auf dem Markt dies unterstützen Schreibmethode
<html>
<head>
<meta charset="UTF-8">
<title>absolute居中定位</title>
<style>
*{margin:0;padding:0}
.absoluteCenter{ width:600px; height:400px;position:absolute; background: rgb(50,183,97); left:50%; top:50%; margin-left: -300px; margin-top: -200px; }
</style>
</head>
<body>
<div>我是absolute居中定位</div>
</body>
</html>2. Übersetzen Sie die Positionierung. Dies ist das Attribut der CSS3-Transformation, das einen großen Vorteil hat. Sie müssen die Breite und Höhe des Div nicht kennen In js können Sie die Breite und Höhe als Prozentsatz festlegen. IE-Browser unterstützt keine bessere Verwendung auf der mobilen Seite. Der Rand ist zentriert und positioniert. Es ist nicht erforderlich, die Breite und Höhe des Div zu bestimmen sodass oben, unten, links und rechts alle 0 sind. Margin:auto hinzufügen Die Navigationsleiste ist zentriert und scrollt nicht mit der Seite<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>translate居中定位</title>
<style>
*{margin:0;padding:0}
.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
</style>
</head>
<body>
<div>我是translate居中定位</div>
</body>
</html>
Empfohlene verwandte Tutorials:
CSS-Video-TutorialDas obige ist der detaillierte Inhalt vonSo zentrieren Sie die Anzeige von CSS-Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!