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

最新推荐文章于 2024-09-14 08:45:00 发布

sendiment

最新推荐文章于 2024-09-14 08:45:00 发布

阅读量282

点赞数 1

本文链接：https://blog.csdn.net/chendiancd/article/details/121767685

版权

HTML CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨如何使用绝对定位和CSS技巧使盒子在父元素中水平居中，包括利用`margin: 0 auto`、`left: 50%; transform: translate(-50%)`的方法，并提供实例代码解析。

摘要由CSDN通过智能技术生成

加了绝对定位的盒子不能通过 margin： 0 auto ；水平居中。


<style>
  .a{
    width:100px;
    height: 100px;
    background-color: lightsteelblue;
    position: absolute;
    margin: 0 auto;
  }
</style>
<body>
<div class="a"></div>
</body>

在这里插入图片描述

需要通过计算实现，先让盒子左侧移到父级元素的水平中心位置，然后让盒子向左移动自身宽度的一半。

<style>
  .a{
    width:100px;
    height: 100px;
    background-color: lightsteelblue;
    position: absolute;
    margin: 0 auto;
    left: 50%;
    margin-left: -50px;
  }
</style>
<body>
<div class="a"></div>
</body>

在这里插入图片描述
也可以利用transform属性计算自身宽度的一半。

<style>
    div{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: lightblue;
    }
    p{
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
    }
  </style>
</head>
<body>
<div>
<p></p>
</div>