DIV 센터링을 달성하는 세 가지 CSS 방법-CSS 튜토리얼-php.cn

DIV 센터링을 달성하는 세 가지 CSS 방법

小云云

풀어 주다： 2018-02-02 11:16:34

원래의

2642명이 탐색했습니다.

이 글은 CSS에서 p 센터링을 구현하는 방법을 주로 공유합니다. CSS 코드는 간단하고 이해하기 쉽고, 참조 가치가 있으며, 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

p 센터링의 구현 코드를 공유하겠습니다. 구체적인 코드는 다음과 같습니다.

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

로그인 후 복사

위의 두 ps를 사용하면 p1

1을 중심으로 p2가 표시됩니다. p1 너비에서 p2의 너비를 뺀 값은 p2margin-left의 값입니다: (100-40)/2=30

p1의 높이에서 p2의 높이를 뺀 값은 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. 방법 2

CSS의 position 속성을 사용하여 p1을 기준으로 p2의 위쪽과 왼쪽을 50%로 설정한 다음 margin-top을 사용하여 p의 음수 절반으로 설정합니다. 뒤로 당기려면 p2의 높이를 사용하세요. Marg-left를 너비의 음수 절반으로 설정하고 뒤로 가져옵니다. CSS는 다음과 같이 설정됩니다. CSS, 다음과 같이 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;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

로그인 후 복사

four, 방법 4

Utilize css3의 새로운 속성 table-cell

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

로그인 후 복사

이 방법의 또 다른 장점은 p2의 높이를 고정할 필요가 없다는 것입니다. 다음과 같습니다

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

로그인 후 복사