CSS文字背景居中显示技巧 - Flexbox 布局方法

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 背景容器高度 */
}

.background {
  background-color: #ccc; /* 背景颜色 */
  padding: 20px; /* 可根据需要调整 */
}

.content {
  text-align: center;
}

通过设置 .container 的 display: flex 属性，使其成为一个 flexbox 容器。然后，使用 justify-content: center 和 align-items: center 分别在水平和垂直方向上居中内容。

在背景的 .content 中使用 text-align: center 属性居中文字内容。

这样就可以让文字在一个背景中居中显示，并且背景的 div 可以容纳更多内容。