Maison >interface Web >tutoriel CSS >Comment centrer l'affichage CSS Div
Comment centrer l'affichage CSS Div
- coldplay.xixioriginal
- 2021-03-11 14:12:2052643parcourir
Comment centrer l'affichage CSS Div : 1. Utilisez le positionnement absolu, le code est [
Positionnement central absolu ] ; 2. Utilisez le positionnement par translation ; 3. Utilisez la marge pour centrer le positionnement ; . Utilisez le positionnement centré fixe.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.
Méthode d'affichage du centre div CSS :
1. Positionnement absolu absolu Il s'agit de notre méthode d'écriture de positionnement central la plus couramment utilisée. Elle nécessite la largeur et la hauteur du div. doit être déterminé. Actuellement sur le marché Les navigateurs sur Internet supportent essentiellement cette méthode d'écriture
<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. Traduire le positionnement C'est l'attribut de la transformation CSS3 qui se positionne via son propre décalage, et il présente un grand avantage. qu'il n'a pas besoin de connaître la largeur et la hauteur du div. Tout comme ce self dans js, vous pouvez définir la largeur et la hauteur en pourcentage. Le navigateur IE 3. La marge est centrée. Il n'est pas nécessaire de déterminer la largeur et la hauteur du div pour permettre que le haut et le bas soient tous deux 0, ajoutez margin:auto, un coup de génie du navigateur IE 8. ne prend pas en charge 4. Positionnement central fixe Ceci peut être le plus couramment utilisé pour centrer la barre de navigation. L'affichage ne défile pas avec la page Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!<!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>. <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>margin居中定位</title>
<style>
*{margin:0;padding:0}
.marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
</style>
</head>
<body>
<div>我是margin居中定位</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed居中定位</title>
<style>
*{margin:0;padding:0}
.fixedCenter{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background:rgb(67,163,244);}
</style>
</head>
<body>
<div>我是fixed居中定位</div>
</body>
</html>