CSS中的绝对定位与居中

CSS中可以使用position: absolute;来使元素脱离文档流，并根据其父元素来定位。在这个基础上，我们可以通过一些技巧来实现元素的水平居中与垂直居中。

水平居中

使用margin

我们可以将绝对定位的元素的左右margin设置为auto来实现水平居中。这只适用于元素外部容器宽度已知的情况。

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

使用transform

我们可以将绝对定位的元素的左边与上边距离父元素的距离设置为50%（假设元素宽度已知），同时使用translateX将元素左移宽度的一半，从而实现水平居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

垂直居中

使用transform

我们可以将绝对定位的元素的上边距离父元素的距离设置为50%（假设元素高度已知），同时使用translateY将元素上移高度的一半，从而实现垂直居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用flex布局

我们可以使用display: flex和align-items: center将父元素设为flex容器，从而实现垂直与水平居中。这种方法适用于元素宽高未知的情况。

.parent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  position: absolute;
}

结束语

以上是些常用的方法，当然还有其他的一些方法，例如使用line-height、表格布局等等。根据不同的场景，我们可以选择不同的方式来实现元素的居中。