DIV のセンタリングを実現する 3 つの CSS メソッド-CSSチュートリアル-php.cn

DIV のセンタリングを実現する 3 つの CSS メソッド

小云云

リリース： 2018-02-02 11:16:34

オリジナル

2644 人が閲覧しました

この記事では、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>

ログイン後にコピー

上記の 2 つの ps では、p2 が p1 の中央に表示されます

方法 1

マージンを使用します。 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を使用してそのマイナス半分に設定します。 p2 の高さを元に戻すには、Marg-left を幅の負の半分に設定して元に戻します

<!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 番目のメソッド

の位置属性を引き続き使用します。 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;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

ログイン後にコピー

four、メソッド4

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{
                display: table-cell;vertical-align: middle;
            }
            .p22{
                margin: auto;
            }
        </style>
        <p class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

ログイン後にコピー

このメソッドのもう1つの利点は、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 ; 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>

ログイン後にコピー