中心绝对元素

中心绝对元素是前端中常用的用于居中元素的方法之一。它的思路是将要居中的元素的 position 设置为 absolute，然后在父元素中设置 position 为 relative，再通过设置 top、left、right、bottom 属性来控制元素的位置。

示例代码

.parent {
  position: relative;
}

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

解释

这段代码通过将 .parent 元素的 position 设置为 relative，使得其中的 .child 元素能够以 .parent 为基准进行定位。然后，.child 元素的 position 设置为 absolute，意味着它将“脱离文档流”，不再占据空间。

接下来的 top: 50%; 和 left: 50%; 将 .child 元素的中心点定位到了 .parent 元素的中心点。

最后，transform: translate(-50%, -50%); 利用 translate 函数根据 .child 元素自身的大小和位置，将其向左上方移动一半的大小，实现居中的效果。

使用场景

中心绝对元素广泛应用于需要居中的场景，如弹窗、提示框等。

注意事项

• 使用中心绝对元素时，需要保证父元素的宽高是明确的，否则无法准确居中。
• 如果需要居中的元素的大小是变动的，需要设置自适应布局，否则无法准确居中。
• 中心绝对元素不支持IE6-7浏览器，需要做兼容处理。