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

·  阅读 151

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

在日常的开发中,我们经常会面对这样一个问题:如何实现居中水平垂直居中对齐。这也是一道经典面试题,本文会对每一个方案进行详细的讲解和实现,让你轻松学习和理解~

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-leftmargin-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-leftmargin-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>
复制代码

效果:

在这里插入图片描述

4. position + margin:auto

  • 元素设置为相对定位position: relative元素设置为绝对定位position: absolute
  • 元素设置top、bottom、left和right为0top: 0; bottom: 0; left: 0; right: 0;
  • 元素设置margin为automargin: 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>
复制代码

效果:

在这里插入图片描述

参考

分类:
前端
标签:
分类:
前端
标签: