css 圆形背景字在中间

在网页设计中，我们经常会遇到需要将文字放在圆形背景中，且让文字居中显示的情况。而这时，我们可以通过使用CSS来实现这个效果。

首先，我们需要创建一个div元素，并设置其圆形样式。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f5f5f5;
}

然后，我们需要在div元素中嵌套一个span元素，来放置我们的文字，并设置span元素的样式。

.circle span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
}

我们使用Flex布局来让文字在圆形背景中居中显示，并设置文字的样式。接下来，我们需要将文字放入span元素中。

<div class="circle">
  <span>Hello World!</span>
</div>

最后，我们就可以得到一个圆形背景字在中间的效果了。

Hello World!