CSS——实现盒子在页面居中

1.三种常见方法

使用translate位移 + position定位实现
使用Grid布局实现
使用Flex布局实现

2.代码示例

2.1 translate + position:使用绝对定位，让盒子脱离文档流，通过top和left将盒子的左上角放到中心点上，然后使用translate移动使其居中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面水平垂直居中</title>
    <style>
      .box {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%; /* 把元素的"上边缘"放到包含块高度的 50% 处 */
        left: 50%; /*  把元素的"左边缘"放到包含块宽度的 50% 处 */
        transform: translate(-50%, -50%);/*向左、向上各移动自身宽/高的 50%，让元素中心与包含块中心重合 */
        background-color: pink;
    }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
  </body>
</html>

2.2 Grid布局：使用place-item:center实现居中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面水平垂直居中</title>
    <style>
    .parent {
        display: grid;
        place-items: center; /* 同时水平和垂直居中 */
        height: 100vh;       /* 为了示例效果，父元素设置全屏高度 */
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
   </style>
  </head>
  <body>
<div class="parent">
   <div class="child"></div>
</div>
  </body>
</html>

2.3 Flex布局:使用justify-content: center和align-items: center，通过控制主轴和交叉轴实现居中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面水平垂直居中</title>
    <style>
     .parent {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;    /* 垂直居中 */
        height: 100vh;          /* 为了示例效果，父元素设置全屏高度 */
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: red;
    }
   </style>
  </head>
  <body>
<div class="parent">
   <div class="child"></div>
</div>
  </body>
</html>