绝对定位元素的水平垂直居中的方法（3种任选）

绝对定位元素的水平垂直居中是前端开发中经常遇到的问题，下面将详细讲解3种任选的方法。

绝对定位元素的水平垂直居中是前端开发中经常遇到的问题，下面将详细讲解3种任选的方法。

方法一：使用绝对定位实现水平垂直居中

首先，在 CSS 中设置绝对定位，并将 left 和 top 设置为 50%。此时元素的左上角将位于页面的中心。

.position{
  position:absolute;
  left:50%;
  top:50%;
}

接下来，需要使用 JavaScript 将元素的宽度和高度分别除以 2，再利用 marginLeft 和 marginTop 将其移回以左上角为基准的位置。

let element = document.querySelector('.position');
element.style.marginLeft = - element.offsetWidth / 2 + 'px';
element.style.marginTop = - element.offsetHeight / 2 + 'px';

方法二：使用 flexbox 实现水平垂直居中

使用 flexbox 实现水平垂直居中可以更方便。

首先，在容器中设置 display: flex 声明容器使用 flex 布局。

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

接下来，将要进行居中的元素包裹在容器中即可。

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

方法三：使用 CSS3 transform 实现水平垂直居中

使用 CSS3 transform 可以让元素相对于自身的中心点旋转，从而实现居中。首先设置绝对定位，并将 top 和 left 设置为 50%，同时在元素中添加如下代码：

.position {
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

此时元素的左上角将位于页面的中心。

接下来，可以用 CSS3 transform 进行旋转，如下所示：

.position{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) rotate(45deg);
}

其中 rotate(45deg) 表示元素将相对于自身的中心点旋转 45 度。

示例：

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

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

.box{
  width:200px;
  height:200px;
  background-color:#ccc;
}

.position{
  position:absolute;
  left:50%;
  top:50%;
}
.position{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) rotate(45deg);
}

以上就是三种实现绝对定位元素水平垂直居中的方法，任选其一即可。