八种CSS实现内容居中的方法

2023-02-28

text flex axis

关于CSS实现内容居中的方式有很多种，在今天这篇文章里，我给大家整理了8种实现内容居中的方式，希望这些方法对你学习和使用CSS进行开发有帮助。1.Flex可能是当今最流行和最简单的居中方式，我可以放心地承认，当我可以使用text-align:center代替时，我使用它来对齐段落。复制.flexb

关于CSS实现内容居中的方式有很多种，在今天这篇文章里，我给大家整理了8种实现内容居中的方式，希望这些方法对你学习和使用CSS进行开发有帮助。

1. Flex

可能是当今最流行和最简单的居中方式，我可以放心地承认，当我可以使用 text-align: center 代替时，我使用它来对齐段落。

.flexbox-row {
  display: flex;
  flex-direction: row; /* default value */
  justify-content: center; /* x-axis */
  align-items: center; /* y-axis */
}1.
2.
3.
4.
5.
6.

如果您不知道自己在做什么，Flexbox 可能会有些混乱。基本上 justify-content 跨越 x 轴，align-items 跨越 y 轴。如果将 flex-direction 设置为 column，则轴将反转。

.flexbox-col {
  display: flex;
  flex-direction: column;
  justify-content: center; /* y-axis */
  align-items: center; /* x-axis */
}1.
2.
3.
4.
5.
6.

这不是一个 flexbox 的文章，所以，在这里不详细介绍flexbox。

2. grid

这个也是非常实用的方法。

.grid {
  display: grid;
  place-items: center;
}1.
2.
3.
4.

3. Flex/Grid + Margin auto

.margins {
  display: flex; /* or grid */
}

.margins p {
  margin: auto;  
}1.
2.
3.
4.
5.
6.
7.

4. Text align

是的，这真的很容易。

p {
  text-align: center;
}1.
2.
3.

5.Padding

如果你没有固定的高度并且想要垂直居中，这可能是最简单的方法。

p {
  padding: 80px 0;
}1.
2.
3.

6. Text align + Padding

这个方法的前提是，没有设置固定高度，在这种场景下，使用这种方法也是非常实用简单的。

p {
  text-align: center;
  padding: 16px 0;
}1.
2.
3.
4.

7.Absolute

这个方法也是非常实用的。

.box {
  position: relative;
}

.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

8.table

这个table虽然有点过时了，但是在一些表格实现文字内容居中的时候，还是非常实用的。

.table {
  display: table;
}

.table p {
  display: table-cell;
  text-align: center; /* x-axis */
  vertical-align: middle; /* y-axis */
}1.
2.
3.
4.
5.
6.
7.
8.
9.