如何在 CSS 中居中项目

在 Web 开发中，居中元素是一个常见的需求。本文将介绍在 CSS 中如何居中项目，包括水平居中和垂直居中。

水平居中

行内元素的水平居中

对于行内元素，可以使用 text-align 属性来实现水平居中。

.container {
  text-align: center;
}

块级元素的水平居中

对于块级元素，可以使用 margin 属性来实现水平居中。通过将左右 margin 设为 auto，可以使块级元素居中。

.container {
  margin: 0 auto;
  /* 或者使用下面的语法 */
  margin-left: auto;
  margin-right: auto;
}

注意，此方法仅适用于具有固定宽度的块级元素，因为只有当元素宽度固定时，左右 margin 才能自动平分剩余空间。

对于宽度不固定的块级元素，可以使用 display: flex 和 justify-content: center 来实现水平居中。

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

垂直居中

单行文本的垂直居中

对于单行文本，可以使用 line-height 属性来实现垂直居中。通过将 line-height 设为盒子的高度，文字就会垂直居中。

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

多行文本的垂直居中

对于多行文本，可以使用 display: table-cell 和 vertical-align: middle 来实现垂直居中。

.container {
  display: table-cell;
  vertical-align: middle;
}

但是，这种方法需要将容器元素的 display 属性设置为 table-cell，这会导致一些不必要的问题，比如不能设置固定宽度，宽度会被内容撑开等。

对于这种情况，可以采用 CSS3 的 flex 布局来实现垂直居中。

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

其中，justify-content: center 实现水平居中，align-items: center 实现垂直居中。

总结

本文介绍了在 CSS 中如何实现水平居中和垂直居中。对于水平居中，可以使用 text-align 或者 margin 属性实现；对于垂直居中，可以使用 line-height、display: table-cell 或者 flex 布局实现。