【盒子居中常用的四种方法】

༺๑码农小黑๑༻

已于 2022-07-29 22:53:59 修改

阅读量5.5k

点赞数 14

分类专栏：初学者文章标签： html 前端 css

于 2022-07-29 17:09:35 首次发布

本文链接：https://blog.csdn.net/weixin_45298348/article/details/126059236

版权

初学者专栏收录该内容

20 篇文章 0 订阅

订阅专栏

案例分析：

1.H5结构：两个盒子，大盒子包着小盒子，

2.CSS样式：大盒子pink，小盒子skyblue

3.实现方法：margin外边距法；table-cell布局法；弹性布局法；定位法，其中定位法是我们在书写前端页面中最最最常用的方法，强烈建议使用。

运行结果：

一、margin外边距：先算好上外边距：子盒子自身宽度的一半加上父盒子宽度的一半;再设置左右边距自动即可居中，margin:?px auto;【以上给子盒子即可】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 给父盒子开启隐藏解决父子外边距合并问题 */
            overflow: hidden;
        }
        
        .box1 {
            /* 使用margin调整上下左右居中，上边距离是子盒子宽度的一半加上父盒子宽度的一半 */
            margin: 75px auto 0;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

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

</html>

二、table-cell布局：父盒子设置display:table-cell;vertical-align:middle;实现垂直居中；子盒子设置:margin:0 auto;实现水平居中

<style>
        .box {
            /* 父盒子宽高背景色 */
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 给父级设置如下代码转换 */
            /* table-cell布局 */
            display: table-cell;
            /* 完成上下垂直居中 */
            vertical-align: middle;
        }
        
        .box1 {
            /* 子盒子一定要margin 0 auto 居于父盒子水平居中 */
            margin: 0 auto;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

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

三、flex弹性布局：父盒子设置：display:flex;align-items:center;justify-content:center;即可实现子盒子水平垂直居中

<style>
.box {
            /* 弹性布局使得所有孩子居中并且具有盒子属性【下三行代码】 */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .box1 {
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="box1"></span>
    </div>
</body>

【强烈推荐】四、定位法：

子绝父相先定位子盒子： top:50%;left:50%;transform:translate(-50%,-50%);

    <style>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .box1 {
            /* 定位法使得垂直居中水平居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

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