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

1f5c6f1967bb17306aae48ad39d50e61.png

关于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 */
}

如果您不知道自己在做什么，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 */
}

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

2. grid

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

.grid {
  display: grid;
  place-items: center;
}

3. Flex/Grid + Margin auto 

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


.margins p {
  margin: auto;  
}

4. Text align

是的，这真的很容易。

p {
  text-align: center;
}

5.Padding

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

p {
  padding: 80px 0;
}

6. Text align + Padding

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

p {
  text-align: center;
  padding: 16px 0;
}

7.Absolute

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

.box {
  position: relative;
}


.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

8.table

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

.table {
  display: table;
}


.table p {
  display: table-cell;
  text-align: center; /* x-axis */
  vertical-align: middle; /* y-axis */
}

写在最后

以上就是我今天跟你分享的8种CSS实现内容居中的方法，如果你觉得有用的话，请记得点赞我，关注我，并将这篇文章分给你的朋友们，也许能够帮助到他。

学习更多技能

请点击下方公众号

3b926517cb1fd39002564de337df185e.gif

794e757a4e52552de430fb924188955b.png