css span 在div中居中显示文字

在HTML中，<div>是一种常用的容器元素。在实际应用中，我们需要对其中的文字或者其他内容进行排版和样式的设置。CSS中，span元素可以用来选择硬编码到HTML代码里的一部分文本，而div元素则可以用来布局网页页面。

如果我们想要在div元素中垂直和水平都居中的显示span元素里的文字，可以应用以下CSS代码：

  div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span {
    font-size: 20px;
  }

我们首先在div元素上应用了display:flex;，以便设置布局方式。接下来，我们在同一个样式块中应用了justify-content: center;和align-items: center;来实现垂直和水平都居中的显示。最后，我们在span元素上应用了font-size: 20px;来设置文字的大小。

实际上，flex布局方式可以帮助我们快速实现HTML元素的排版效果。通过这种方式，我们可以轻松地实现span元素在div容器中的居中效果。