div居中方法2

最新推荐文章于 2023-08-13 00:34:20 发布

晚i风

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/qq_36836332/article/details/81592416

版权

利用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;
                overflow: hidden;
            } 
            .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>