css span div中居中显示文字

CSS如何让span和

div

中的文字居中显示呢？

span {
  display: inline-block;
  text-align: center;
  line-height: 50px; /* 根据需要自定义 */
}

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

对于span，因为默认情况下它的display属性是inline，所以我们需要将其改为inline-block以允许居中显示。然后，我们使用text-align属性将文字水平居中，并且使用line-height属性来垂直居中文字，其值应该根据具体情况而定。

对于

div

，我们可以使用flex布局，将其内部的内容水平和垂直居中。使用justify-content:center可以将内容水平居中，而align-items:center则可以将内容垂直居中。

上述方法都可以达到让span和

div

中的文字居中显示的效果，我们可以根据实际需要选择不同的方法。