Heim > Artikel > Web-Frontend > Drei CSS-Methoden zur DIV-Zentrierung

Drei CSS-Methoden zur DIV-Zentrierung

小云云Original: 2018-02-02 11:16:342584Durchsuche

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 4

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

css css3 html position margin table

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Code-Sharing für die Implementierung von CSS-Zoom-AnimationenNächster Artikel：Code-Sharing für die Implementierung von CSS-Zoom-Animationen

In Verbindung stehende Artikel

Mehr sehen