Maison > Article > interface Web > Trois méthodes CSS pour réaliser le centrage DIV

Trois méthodes CSS pour réaliser le centrage DIV

小云云original: 2018-02-02 11:16:342589parcourir

Cet article partage principalement avec vous la méthode de réalisation du centrage p en CSS. Le code CSS est simple et facile à comprendre, très bon, et a une valeur de référence. J'espère qu'il pourra vous aider. tout le monde.

Laissez-moi partager avec vous le code d'implémentation du centrage p. Le code spécifique est le suivant :

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

Les deux p ci-dessus réalisent que p2. est dans p1 À l'intérieur se trouve un affichage centré

1. Méthode 1

En utilisant la marge, la largeur de p1 moins la largeur de p2 est la valeur de p2margin-left : (100-40)/ 2=30

La hauteur de p1 moins la hauteur de p2 est la valeur de 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. Méthode 2

À l'aide de l'attribut position de CSS, définissez le haut et la gauche de p2 par rapport à p1 à 50 %, puis utilisez margin-top pour le définir sur la moitié négative de la hauteur de p2 pour le retirer et utilisez margin-left pour le régler sur la largeur. Retirez la moitié négative et définissez le CSS comme suit

<!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. Méthode 3

Utilisez toujours l'attribut position de CSS, comme suit 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>

Quatre méthode 4

Utiliser le nouveau. attribut table-cell en 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>

Un autre avantage de cette méthode est que la hauteur de p2 n'a pas besoin d'être fixée, comme suit

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

Recommandations associées :

À quoi devez-vous faire attention lorsque vous centrez des divs en HTML

Centrage div : le résumé le plus complet des méthodes de centrage div

Comment utiliser CSS pour centrer DIV Centered

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!

css css3 html position margin table

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage de code d'implémentation d'animation de zoom circulaire CSSArticle suivant：Partage de code d'implémentation d'animation de zoom circulaire CSS

Articles Liés

Voir plus