Heim > Artikel > Web-Frontend > Drei CSS-Methoden zur DIV-Zentrierung
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>Viertens Methode 4Verwenden Sie das neue Attributtabellenzelle von CSS3
<!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>Ein weiterer Vorteil dieser Methode besteht darin, dass die Höhe von p2 nicht festgelegt werden muss, 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 ; 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>Verwandte Empfehlungen:
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!