div居中方法2

​​​​​​利用margin计算数值

利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30

div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>居中2</title>
    </head>
    <body>
        <style>
            .fu{  
                width: 100px; 
                height: 100px; 
                border: 1px solid #000000;
            } 
            .zi{ 
                width:40px; 
                height: 40px; 
                background-color: green;
                margin-left: 30px;
                margin-top: 30px;
            }
        </style>
        <div class="fu">
            <div class="zi">
            </div>
        </div>

    </body></html>

猜你喜欢

转载自blog.csdn.net/qq_36836332/article/details/81592416