CSS中设置盒子水平垂直居中的几种方法

最新推荐文章于 2023-09-30 13:11:25 发布

Andrew_SJ

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量218

点赞数 1

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/Andrew_SJ/article/details/117092570

版权

前端专栏收录该内容

97 篇文章 3 订阅

订阅专栏

CSS中设置盒子水平垂直居中

<!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>
    /* 1. 子绝父相，子盒子left\top\bottom\right设为0，margin为auto */
    /* .a {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: red;

    }

    .b {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      background-color: black;
    } */

    /* 2. 子绝父相，子盒子left和top设为50%，然后通过margin-top和margin-left上移/左移自身一半像素*/
    /* .a {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: red;

    }
    .b {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-top: -100px;
      margin-left: -100px;
      background-color: black;
    } */

    /* 3.  子绝父相，子盒子left和top设为50%，然后通过translate上移/左移自身一半像素*/
    /* .a {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: red;

    }

    .b {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: black;
    } */

    /* 4. 设置父盒子为flex并添加align-items和justify-content属性 */
    .a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 400px;
      height: 400px;
      background-color: red;

    }

    .b {
      width: 200px;
      height: 200px;
      background-color: black;
    }
  </style>
</head>

<body>
  <div class="a">
    <div class="b"></div>
  </div>
</body>

</html>

在这里插入图片描述

Andrew_SJ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS中设置盒子水平垂直居中的几种方法

CSS中设置盒子水平垂直居中<!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"> <titl
复制链接

扫一扫

专栏目录