前端二十九:两个盒子居中的练习

最新推荐文章于 2023-07-02 13:07:55 发布

请叫我大虾

最新推荐文章于 2023-07-02 13:07:55 发布

阅读量570

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37564426/article/details/91364626

版权

前端专栏收录该内容

41 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         /* 有一个大的div,宽500,高300.
               在大的div中有一个小的div,宽200,高100
               现在需要将小的div放在大的div中间位置(水平和上下都居中),
               并且两个盒子的宽高都不能改变.
            */
           /*方法一:
           .father{
            width:200px;
            height: 100px;
            border: 1px solid red;
            padding: 100px 150px;
           }

           .son{
            width:200px;
            height: 100px;
            border: 1px solid blue;
           } */

           /*方法二:*/
           .father{
            width:350px;
            height: 200px;
            border: 1px solid red;
            padding-top: 100px;
            padding-left: 150px;
           }

           .son{
            width:200px;
            height: 100px;
            border: 1px solid blue;
           } 
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            
        </div>
    </div>
</body>
</html>