[分享]css中字体居中代码

CSS中可以使用textalign:center来实现文本居中的效果，但是对于字体的居中就需要更多的技巧。在处理字体居中时，我们要区分单行和多行文字的情况。单行字体居中：.textcenter { d...

CSS中可以使用text-align:center来实现文本居中的效果，但是对于字体的居中就需要更多的技巧。

在处理字体居中时，我们要区分单行和多行文字的情况。

单行字体居中：

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

使用flex布局，将容器display属性设置为flex，并用justify-content: center和align-items:center来水平和垂直居中。

多行字体居中：

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

使用grid布局，将容器display属性设置为grid，并通过place-items:center来将内容居中。

以上方法都是针对容器中只有文字的情况，如果我们需要对容器中含有图片等其他元素时实现字体居中，可以通过内边距padding来调整。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #eee;
}
.container img {
  /* 通过padding值来实现字体的居中 */
  padding: 10px;
} 

以上代码中，.container是一个容器，里面包含了一张图片。我们通过将display属性设置为flex并使用justify-content:center和align-items:center来实现容器的居中，再通过padding来调整图片和字体的位置，从而达到字体居中的效果。