Heim > Artikel > Web-Frontend > Drei CSS-Methoden zur DIV-Zentrierung
Drei CSS-Methoden zur DIV-Zentrierung
- 小云云Original
- 2018-02-02 11:16:342596Durchsuche
Dieser Artikel teilt Ihnen hauptsächlich die Methode zur Realisierung der P-Zentrierung in CSS mit. Der CSS-Code ist einfach und leicht zu verstehen, und Freunde, die ihn benötigen, können darauf verweisen alle.
Lassen Sie mich den Implementierungscode der p-Zentrierung mitteilen. Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
</style>
<p class="p1">
<p class="p2">
</p>
</p>
</body>
</html>
Die beiden oben genannten ps erkennen, dass p2 liegt innerhalb von p1 Darin befindet sich eine zentrierte Anzeige
1. Methode 1
Unter Verwendung von margin ist die Breite von p1 minus der Breite von p2 der Wert von p2margin-left: (100-40)/ 2=30
Die Höhe von p1 minus der Höhe von p2 ist der Wert von p2margin-top: (100-40)/2=30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p22{
margin-left: 30px;margin-top: 30px;
}
</style>
<p class="p1">
<p class="p2 p22">
</p>
</p>
</body>
</html>
2. Methode 2
Stellen Sie mithilfe des Positionsattributs von CSS den oberen und linken Rand von p2 relativ zu p1 auf 50 % ein und verwenden Sie dann „margin-top“, um ihn auf die negative Hälfte der Höhe von zu setzen p2, um es zurückzuziehen, und verwenden Sie margin-left, um die negative Hälfte zurückzuziehen, und stellen Sie das CSS wie folgt ein:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
position: relative;
}
.p22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
3. Methode 3
Verwenden Sie weiterhin das Positionsattribut von CSS, wie folgt: HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
position: relative;
}
.p22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; background-color: green;}
.p11{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
p居中方法
</p>
</p>
</body>
</html>
Worauf sollten Sie beim Zentrieren von Divs in HTML achten
Divs zentrieren: die umfassendste Zusammenfassung der Methoden zur Div-Zentrierung
So verwenden Sie CSS, um DIVs zentriert zu zentrieren
Das obige ist der detaillierte Inhalt vonDrei CSS-Methoden zur DIV-Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!