CSS补充

最新推荐文章于 2025-03-25 15:45:22 发布

xyhhhhhhhha

最新推荐文章于 2025-03-25 15:45:22 发布

阅读量112

点赞数

分类专栏：测试

原文链接：https://www.bilibili.com/video/BV1QC4y147Ey?p=11&spm_id_from=pageDriver

版权

测试专栏收录该内容

6 篇文章

订阅专栏

在这里插入图片描述
两个盒子水平居中很简单直接设置margin: auto;属性即可，垂直居中就有些困难了，以下有两种形式。

利用margin-top属性

注意margin-top若直接使用，outer中没有border的话，这个时候达不到效果，两个盒子会整体往下移，奇奇怪怪，就像这样。
在这里插入图片描述
以下是完整的正确代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test盒子</title>
    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: orange;
            margin: auto;
            border: solid 2px orange;
            /*padding-top: 100px;*/
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: auto;
            margin-top: 100px;
        }
    </style>

</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>

    </div>
</body>
</html>

页面结果
在这里插入图片描述

使用padding-top填充

注意padding是填充效果而不是单纯的移动效果，因此必须对外面盒子的大小重新进行计算，例如padding-top: 100px;是指小盒子向上填充了100个像素，因此外面的大盒子的高度需要减少100个像素。
完整的正确代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test盒子</title>
    <style>
        .outer{
            width: 400px;
            height: 300px;
            background-color: orange;
            margin: auto;
            /*border: solid 2px orange;*/
            padding-top: 100px;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: auto;
            /*margin-top: 100px;*/
        }
    </style>

</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>

    </div>
</body>
</html>

在这里插入图片描述