CSS：绝对定位的盒子居中算法

听海边涛声

已于 2024-08-07 09:26:09 修改

阅读量374

点赞数 10

文章标签： css 前端

于 2024-08-07 09:22:13 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140971767

版权

让绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto;水平居中。但可以通过以下计算方法实现水平居中：

1） left走50%，就是带有定位的祖先容器宽度的一半。
2） margin-left，往左边走自己盒子宽度的一半（往左走值是负值）。

通过以下方法实现垂直居中：
1）top走带有定位的祖先容器的50%
2）margin-top 往上走盒子自身高度的一半（往上走值是负值）。

示例

加了绝对定位的盒子不能通过`margin: 0 auto;`水平居中

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: auto;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

在这里插入图片描述

实现绝对定位的盒子水平和垂直居中

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      /* left走50%，就是带有定位的祖先容器宽度的一半 */
      left: 50%;
      /* margin-left:赋值，往左边走自己盒子宽度的一半(往左走值是负值) */
      margin-left: -100px;
      /* top走带有定位的祖先容器高度的50% */
      top: 50%;
      /* margin-top 往上走盒子自身高度的一半（往上走值是负值） */
      margin-top: -100px;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>