让子盒子在父盒子中垂直居中的七个方法

最新推荐文章于 2024-07-14 19:24:54 发布

小艾同学喔

最新推荐文章于 2024-07-14 19:24:54 发布

阅读量7.1k

点赞数 16

分类专栏：分享前端知识文章标签： css css3 html html5

本文链接：https://blog.csdn.net/al654123/article/details/104562026

版权

分享前端知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、用padding实现

1.padding-top = (父盒子的高度 - 子盒子的高度) / 2
2.padding-left = (父盒子的宽度 - 子盒子的宽度) / 2
3.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子居中联系</title>
    <style>
        /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */
        .dad {
            /* 300-75=225 */
            width: 225px;
            /* 300-100=200 */
            height: 200px;
            background-color: #f34;
            /* （300-150）/2=75 */
            padding-left: 75px;
            /* (300-100)/2=100 */
            padding-top: 100px;
        }

        .son {
            width: 150px;
            height: 100px;
            background-color: #ee9;

        }
    </style>
</head>

<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>

</html>

在这里插入图片描述

二、用margin实现

1.margin-top = (父盒子的高度 - 子盒子的高度) / 2
2.margin-left = (父盒子的宽度 - 子盒子的宽度) / 2
3.子盒子加margin-top会使父盒子产生塌陷，需要解决塌陷问题

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直居中</title>
    <style>
        /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */
        .dad {
            /* 嵌套的盒子中，子盒子的margin-top会产生塌陷 */
            overflow: hidden;
            width: 300px;
            height: 300px;
            background-color: #f34;
        }

        .son {
            width: 150px;
            height: 100px;
            /* (300-100)/2 */
            margin-top: 100px;
            /* (300-150)/2 */
            margin-left: 75px;
            background-color: #ee9;
        }
    </style>
</head>

<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>

</html>

在这里插入图片描述

三、text-align+margin

1.先利用text-align:center;时盒子水平居中。
2.由于text-align不能是块级元素水平居中，所以要对子盒子进行类型转换。
3.再利用margin实现垂直居中

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直居中</title>
    <style>
        /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */
        .dad {
            width: 300px;
            height: 300px;
            background-color: #f34;
            /* 让除了块级元素以外的元素水平居中 */
            text-align: center;

        }

        .son {
            /* 转为行内块元素 */
            display: inline-block;
            /* (300-100)/2 */
            margin-top: 100px;
            width: 150px;
            height: 100px;
            background-color: #ee9;
        }
    </style>
</head>

<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>

</html>

在这里插入图片描述

四、利用定位

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用定位+auto</title>
    <style>
        /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */
        .dad {
            /* 父相 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #f34;
        }

        .son {
            /* 子绝 */
            position: absolute;
            /* 先向下偏移父盒子高度的一半，此时子盒子的上边线垂直居中于父盒子 */
            top: 50%;
            /* 再向上移动自身高度的一半 */
            margin-top: -50px;
            /* 先向右偏移父盒子宽度的一半，此时子盒子的左边线水平居中于父盒子 */
            left: 50%;
            /* 再向右移动自身宽度的一半 */
            margin-left: -75px;
            width: 150px;
            height: 100px;
            background-color: #ee9;
        }
    </style>
</head>

<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>

</html>

在这里插入图片描述

五、利用定位-auto

1.利用子绝父相定位，再使子盒子上下左右的距离都为0
2.margin:auto;一般情况下只能使盒子水平居中，但当子盒子上下左右距离都为0，此时可实现盒子垂直水平居中的效果。
3.且此时，无论父盒子和子盒子宽高如何改变，子盒子都是垂直居中的。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用定位+auto</title>
    <style>
        /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */
        .dad {
            /* 父相 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #f34;
        }

        .son {
            /* 子绝 */
            position: absolute;
            /* 让盒子边偏移上下左右值都为0，再利用margin：auto来实现水平垂直都居中 */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /* 此时，无论盒子大小如何改变，都是水平垂直居中 */
            width: 150px;
            height: 100px;
            background-color: #ee9;
        }
    </style>
</head>

<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>

</html>

在这里插入图片描述

六、利用定位+translate

1.利用定位让子盒子右移父亲宽度的一半，下移父亲高度的一半。
2.再用translate左移自身宽度的一半，上移自身宽度的一半。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box4 {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: #faf634;
            transform: translate(100px, 100px);
        }

        /* 让box5在box4 中水平垂直居中 */
        .box5 {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 此时盒子的上边垂直居中于父盒子，左边水平居中于父盒子，只需要向上和向左走自身宽度的一半即可垂直水平居中 */
            /* 由于x轴值越大就是向右，y轴值越大就是向下，所里向左和向上是负号 */
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box4">
        <div class="box5"></div>
    </div>

</body>

</html>

七、flex布局实现

1.让子项在主轴上居中，在侧轴上居中就行了。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            display: flex;
            width: 300px;
            height: 300px;
            align-items: center;
            justify-content: center;
            background-color: #f34;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #09f;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

分享完毕，不妥之处，敬请批评指正，谢谢大家！

小艾同学喔

关注

16
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
让子盒子在父盒子中垂直居中的七个方法

一、用padding实现1.padding-top = (父盒子的高度 - 子盒子的高度) / 22.padding-left = (父盒子的宽度 - 子盒子的宽度) / 23.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值<!DOCTYPE html><html lang="zh-CN"><head> <...
复制链接

扫一扫