如何在 CSS 中居中

在 CSS 中，我们常常需要居中元素。居中是一项非常常见的 UI 设计技能，所以学会正确地居中元素是非常重要的。

水平居中

文字

要实现一个块级元素内部的文字水平居中，有两种方式。

第一种是使用 text-align 属性，将父元素设置为居中：

.parent {
  text-align: center;
}

第二种是设置 display: flex 属性，然后使用 justify-content 属性将 itens 居中：

.parent {
  display: flex;
  justify-content: center;
}

块元素

在一个未知宽度的块级元素中，想要让其内容物水平居中，可以使用 margin: 0 auto 的技巧：

.block {
  width: 50%; /* 假设宽度为 50% */
  margin: 0 auto;
}

如果你知道元素的宽度，还可以使用 position 和 left 属性让元素居中：

.block {
  position: absolute;
  width: 200px; /* 知道宽度 */
  left: 50%;
  margin-left: -100px; /* 宽度一半的负值 */
}

如果你听过 CSS3 的 transform 属性，你可以使用它来构建更简洁、可重用的居中方式：

.block {
  position: absolute;
  width: 200px;
  left: 50%;
  transform: translateX(-50%);
}

垂直居中

单行文本

对于单行文本，我们只需要把它的 line-height 属性和父元素的高度设为相等的值，就可以实现居中：

.parent {
  height: 100px;
  line-height: 100px;
}

多行文本

对于多行文本，我们可以使用 flexbox 或者 transform 来实现垂直居中。

使用 flexbox：

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

使用 transform：

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

居中总结

以上只是 CSS 中一些常见的居中方式，你可以使用它们来实现你的设计需求。当然，不同的居中方式和不同的场景都有特定的最佳实践。希望这篇文章可以帮助到你更好地理解和应用居中技巧。