CSS 绝对来自中心而不是角落

CSS 中有一个常见问题就是如何让元素绝对居中。通常情况下，我们会使用组合方式，即将相对定位（position: relative）与负边距（margin）结合使用。而这种方法有时会让我们难以准确地计算出正确的数值。因此本文将介绍一种简单的方法，使元素相对于中心位置进行定位。

居中方法

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

这是一个非常简单的方法，只需要使用 position: absolute 将元素从文档流中脱离出来并定位到父元素上，然后将 top 和 left 的值设置为 50%，使元素对准父元素的中心。最后使用 transform: translate(-50%, -50%) 将元素移动到其自身宽度和高度的一半之处，即元素的中心位置。这样，无论元素的尺寸如何变化，它们都会始终相对于父元素的中心位置得到居中。

示例

在以下示例中，我们将使用一个 div 元素来演示该方法。我们将其样式类命名为 center，并将其与一个拥有 400px 宽度和 300px 高度的父元素相关联。

<div class="parent">
  <div class="center">这里是居中的内容</div>
</div>

.parent {
  width: 400px;
  height: 300px;
  position: relative;
  background-color: #eee;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f00;
  color: #fff;
  padding: 20px;
}

总结

CSS 绝对居中并不需要太多的定位技巧，只需要使用 top、left 与 transform 的组合，可以方便而快速地实现居中效果。

以上就是简单的居中方法介绍，更多 CSS 的技巧及应用可以参考 MDN 等官方文档。

## 参考链接

- [CSS Layout - Horizontal & Vertical Align](http://learnlayout.com/center.html)
- [MDN Web Docs - Transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
- [MDN Web Docs - position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)