CSS使用绝对定位进行定位居中的个人理解

最新推荐文章于 2025-05-20 16:03:09 发布

原创最新推荐文章于 2025-05-20 16:03:09 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

web应用开发专栏收录该内容

20 篇文章

订阅专栏

该文章介绍了如何使用CSS的绝对定位结合负边距或transform属性来实现元素的水平垂直居中。通过设置元素的left和top为50%，然后通过负外边距或translate方法调整，可以精确地将元素置于容器中心。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<head>  
  <style>
    .center {
      width: 520px;
      height: 256px;
      background-color: aqua;
      position: absolute;
      left: 50%;
      top: 50%;
 	  /* 适应外边距减少的方式 向左平移一半 */
      margin-left: -260px;
      margin-top: -128px;
      /* 或者直接使用以下代码：向左移动50% 就是自己宽高的一半 */
      /* transform: translate(-50%, -50%); */
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

原理

绝对定位可以使元素在上级框架内绝对移动，通过设置left、top为50%，使元素向右、向下移动上级框架宽高的一半。

    .center {
      position: absolute;
      left: 50%;
      top: 50%;
       /* 使元素向右、向下移动上级框架宽高的50% */

在这里插入图片描述
可以发现此时并没有居中，因为元素自身也有宽高属性，所有只需要反方向移动元素自身宽高的50%即可，有两种方式

通过设置负数外边距实现向上、向左移动
通过tuansform直接移动-50%实现

   .center {
 	  /*方式1：适应外边距减少的方式 向上、向左移动宽高的一半 */
      margin-left: -260px;
      margin-top: -128px;
      /* 或者直接使用以下代码：向左移动50% 就是自己宽高的一半 */
      /* transform: translate(-50%, -50%); */
    }