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