CSS | 居中元素

在网页设计中，元素的居中是经常使用的操作。本文将介绍 CSS 中常用的三种元素居中方法。

水平居中

文本居中

如果想要将一个文本在一个容器内水平居中，可以使用以下代码：

.container {
  text-align: center;
}

这将会将容器内的所有文本都居中对齐。

元素居中

如果想要将一个元素在一个容器内水平居中，可以使用以下代码：

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

这将会使容器内的子元素集中在容器中央。

或者，您也可以使用以下代码：

.container {
  text-align: center;
}

.element {
  display: inline-block;
}

这将会将容器内的元素设为行内块级元素，使其具有文本居中的属性，然后再使用文本居中的方法来水平居中。

垂直居中

单行文本垂直居中

如果想要将一个单行文本在一个容器内垂直居中，可以使用以下代码：

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

其中 line-height 的值等于容器高度即可实现单行文本的垂直居中。

多行文本垂直居中

如果想要将一个多行文本在一个容器内垂直居中，可以使用以下代码：

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

这将会将容器内的子元素集中在容器中央。

或者，您也可以使用以下代码：

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

这将会将容器内的元素设为表格单元格，使其能够享受到垂直居中属性，然后再使用垂直居中属性来垂直居中。

水平垂直居中

如果想要将一个元素在一个容器内水平垂直居中，可以使用以下代码：

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

这将会将容器内的子元素居中于容器中央。

结语

以上是 CSS 中常用的元素居中方法。希望本文能够帮到正在学习 CSS 的读者们。