Drei CSS-Methoden zur DIV-Zentrierung-CSS-Tutorial-php.cn

Drei CSS-Methoden zur DIV-Zentrierung

小云云

Freigeben： 2018-02-02 11:16:34

Original

2644 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!