css居中文本添加背景

CSS有很多种方式可以居中文本，但是如何在居中的文本上添加一个背景呢？下面我们将介绍一种简单易用的方法。

我们可以使用display:flex;和align-items:center;实现文本居中。代码如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #eee;
}
.text {
    background-color: #fff;
    padding:20px;
    border-radius: 10px;
}

其中，.container为父容器，.text为文本。我们将父容器的高度设置为300px，背景颜色为#eee。然后将文本的背景颜色设置为#fff，内部padding为20px，边框圆角半径为10px。

这时，“文本”就已经在容器中居中了，并且背景也已经显示出来。这种方法简单易懂，同时还省去了使用定位等方法的麻烦。

总的来说，通过使用display:flex;和align-items:center;，我们可以简单快速地实现文本居中，并且添加背景也是非常方便的。