CSS实现div的嵌套居中显示的多种方式

最新推荐文章于 2024-07-25 08:14:42 发布

飘逸飘逸

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量4.1k

点赞数 1

文章标签： css 前端 html less

本文链接：https://blog.csdn.net/qq_55896432/article/details/127204887

版权

1.通过flex方式实现：将父盒子的position属性设置为relative，并且display设置为flex，最后设置水平居中和垂直居中。这样设置后，子盒子不需要设置什么，就会实现居中。哪个盒子需要居中，就将父盒子设置这四个属性即可。这样有利于嵌套使用，这也是我实现居中最常用的方式。

例子：

文件center.html的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="center1.css">
</head>
<body>
    <div class="outer">
        <div class="inner">

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

文件center1.css的内容如下

* {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
body .outer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  background-color: red;
}
body .outer .inner {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: green;
}

补充：我写样式时，喜欢写less文件的方式，所以，这里补充一下less文件。（利用VsCode会自动将less转换为css）。以下是center1.less的代码。

* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    display: flex;
    // 水平居中
    justify-content: center;
    //垂直居中
    align-items: center;
    // width: 100%;
    height: 100vh;

    .outer {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
        background-color: red;

        .inner {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    }
}

结果：为了保证功能相同，所有实现方式的结果都是下面这样，后面就不写结果了。

注意：

1.position、display、justify-content和align-items四个属性缺一不可，且值不能改变。

2.需要设置父盒子和子盒子的宽度和高度，不然居中就失去了意义。从body的样式开始写，是为了体现在整个屏幕最中心的功能，body样式的宽度可以不设置（默认是100%），但是高度需要设置为100vh。

2.通过原生方式：手动调节两个盒子之间的距离，实现居中，较为灵活。这种方式对父盒子设置不多，所有的关键设置都在子盒子里面，与上面的方式恰好相反。

例子：

文件center.html的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="center2.css">
</head>
<body>
    <div class="outer">
        <div class="inner">

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

文件center2.css代码如下

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
body .outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background-color: red;
  transform: translate(-50%, -50%);
}
body .outer .inner {
  position: relative;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background-color: green;
  transform: translate(-50%, -50%);
}

补充：文件center2.less的代码如下

* {
    margin: 0;
    padding: 0;
}

body {
    // width: 100%;
    height: 100vh;

    .outer {
        position: absolute;
        // 对body这个盒子来说的比例
        top: 50%;
        left: 50%;

        width: 400px;
        height: 400px;
        background-color: red;
        // 对当前盒子来说的比例
        transform: translate(-50%, -50%);

        .inner {
            position: relative;
            // 对.outer这个盒子来说的比例，top和left属性只有在position属性值为absolute或relative时才能使用
            top: 50%;
            left: 50%;
            // 上面的比例等价于以下数值
            // top: 200px;
            // left: 200px;
            // 当然将top和left两个属性替换为margin-top或margin-left也可以，这样又会产生两种方式。
            // margin-top和margin-left属性对position属性没什么要求
            // margin-top: 50%;
            // margin-left: 50%;
            // margin-top: 200px;
            // margin-left: 200px;
            


            width: 200px;
            height: 200px;
            background-color: green;

            // 对当前盒子来说的比例
            transform: translate(-50%, -50%);
            // 上面的数值等价于以下数值
            // transform: translate(-100px, -100px);


        }
    }
}

注意：

1.可以看到center2.less实现方式较多，都可以实现相同功能，对于新手，先熟悉一种就好，不然容易混了。一般使用目前center2.css当前表示方式即可，也就是center2.less没有注释掉的方式。（如果熟悉了一种方式，也可以测试一下其他方式）

2.两个盒子外边距实现方式的注意点

方式1：使用left和top方式时，position属性的值必须为absolute或者relative。

方式2：这种方式纯属为了表明方式1的意义才写的，一般不使用。left和top属性的百分比是对于父盒子而言。

方式3：margin-top和margin-left属性对于所有的position的值都可以使用。（不写position属性，使用默认值static也可以）

方式4：这种方式纯属为了表明方式3的意义，一般不使用。

常用的方式是方式1和方式3，使用方式1需要将position属性设置为absolute或relative。

3.如果只设置上和左的外边距，会发现盒子并非在中央。上和左分别偏移了宽度和长度的一半，所以需要向上移动宽度的一半，向左移动长度的一半。移动的百分比是对于当前盒子而言，正好符合我们的需求。我们一般使用百分比方式移动即可，数值移动是为了区分上面百分比才写的。

3.混合使用方式：就是将上面两种方式混合使用，随自己的心意进行写，一般不会这样使用。写这种方式，真正理解了上面的实现方式，实现居中div真的非常容易。

例子：

文件center.html的代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="center3.css">
  </head>
  <body>
    <div class="outer">
      <div class="inner">

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

文件center3.css的代码如下

* {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  height: 100vh;
  display: flex;
  justify-items: center;
  align-items: center;
}
body .outer {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: red;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
body .outer .inner {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: green;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

文件center3.less的代码如下

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  // width: 100%;
  height: 100vh;
  display: flex;
  justify-items: center;
  align-items: center;

  .outer {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: red;

    // 手写
    position: absolute;
    // 相对于body盒子的比例
    left: 50%;
    // 向左移动当前盒子的一半距离
    transform: translate(-50%);

    .inner {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: green;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}