CSS:如何在图像上垂直和水平居中显示文本

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.container img {
  /* 图像样式 */
}

.container span {
  /* 文本样式 */
}

.container {
  position: relative; /* 相对定位 */
}

.container img {
  /* 图像样式 */
}

.container span {
  position: absolute; /* 绝对定位 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center; /* 文本水平居中 */
}

.container {
  display: table;
}

.container img {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 图像水平居中 */
}

.container span {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 文本水平居中 */
}