如何让一个元素水平垂直居中？(方案总结+代码实例) 超详细

最新推荐文章于 2024-06-03 18:53:48 发布

置顶圆圆01

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量764

点赞数 6

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45844049/article/details/115404672

版权

CSS 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

本文详细介绍了使用CSS实现元素在父容器中水平垂直居中的四种常见方法：1) flex布局；2) position配合负margin；3) position结合transform平移；4) position和margin auto。每种方法通过实例代码展示，并解释了其工作原理，帮助开发者更好地理解和运用这些技巧。

摘要由CSDN通过智能技术生成

1. flex

使用弹性盒子布局，只需要给待处理的块状元素的父元素添加属性：

 /* 弹性盒子布局 */
 display: flex;
 /* 水平居中 */
 justify-content: center; 
 /* 垂直居中 */
 align-items: center;

该方案在实际开发中应用颇多，也比较简单直观，不需要确定子盒子宽高就可以实现。

实例代码，复制即可查看效果：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: orangered;

            /* 弹性盒子布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center; 
            /* 垂直居中 */
            align-items: center;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>

效果：
在这里插入图片描述

2. position (需要确定子元素宽高)

父元素设置为相对定位：position: relative；子元素设置为绝对定位：position: absolute
子元素设置top和left为50%：top: 50%; left: 50%;
子元素设置margin-left和margin-top为自身宽高一半的负值：margin-left: -50px; margin-top: -50px; （自身宽高为height: 100px; width: 100px;）

实例代码，复制即可查看效果：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: rgb(201, 211, 58);

            /* 父盒子 相对定位 */
            position: relative;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: rgb(211, 18, 98);

            /* 子盒子 绝对定位 */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>

效果：
在这里插入图片描述

3. position + transform 元素平移

只需将上面例子中的：子元素设置margin-left和margin-top为自身宽高一半的负值
替换为：transform: translate(-50%,-50%);

即：

父元素设置为相对定位：position: relative；子元素设置为绝对定位：position: absolute
子元素设置top和left为50%：top: 50%; left: 50%;
子元素设置transform为 translate(-50%,-50%)：transform: translate(-50%,-50%);

这个方法比较特殊，虽说只改了一行代码，但是原理是什么？只是背一行代码就会显得十分草率。

所以再放实例代码之前，我们先来看看这个方法如何实现了水平垂直居中。

transform: translate(x,y);的语法定义了元素的2D转换，也就是元素移动（平移），讲完这个我们再来看，子元素设置绝对定位，top和left各移动50%后，子元素左上角正好在父盒子的中心，此时还没有实现子元素的水平垂直居中（即子元素的中心点在父盒子的中心，而不是左上角在父盒子中心）。接着往下看：

translate(x,y) 括号里填百分比数据的话，会以本身的长宽做参考，注意，不是以父盒子宽高为参考，这就是该方法最需要理解的一个点。比如，本身的宽为100px，高为100px. 那填translate(50%,50%)就是向右和向下各移动50px，添加负号就是向着相反的方向移动。移动后的效果就是子元素的中心点在父元素的中心，实现了水平垂直居中。

实例代码，复制即可查看效果：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: rgb(231, 69, 20);

            /* 父盒子 相对定位 */
            position: relative;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: rgb(67, 33, 218);

            /* 子盒子 绝对定位 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>

效果：
在这里插入图片描述
http://www.imooc.com/qadetail/129282

4. position + margin：auto

父元素设置为相对定位：position: relative；子元素设置为绝对定位：position: absolute
子元素设置top、bottom、left和right为0：top: 0; bottom: 0; left: 0; right: 0;
子元素设置margin为auto：margin: auto;

实例代码，复制即可查看效果：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: rgb(74, 199, 43);

            /* 父盒子 相对定位 */
            position: relative;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: rgb(20, 38, 117);

            /* 子盒子 绝对定位 */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>