子容器在父容器中水平和垂直居中的解决办法

最新推荐文章于 2023-08-06 21:03:55 发布

零一天涯

最新推荐文章于 2023-08-06 21:03:55 发布

阅读量474

点赞数

本文链接：https://blog.csdn.net/yfzna6l/article/details/38326421

版权

</pre><pre name="code" class="html"><span style="font-family:Courier New;font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       .father{
           width: 400px;
           height: 300px;
           margin: 0 auto;
           border: 10px solid #21296d;
           position: relative;
       }
       .son{
           width: 200px;
           height:150px;
           box-sizing: border-box;
           border: 20px solid #0c520e;
           position: absolute;
           top:50%;
           left: 50%;
           margin-left: -100px;
           margin-top: -75px;
       }

    </style>
</head>
<body>
   <div class="father">
       <div class="son"></div>
   </div>
</body>
</html></span>