如何实现图片上方垂直布局组内文本的水平垂直居中

你新增的几个属性不生效，核心是没有满足属性的生效前置条件：

• justify-content、align-items 是Flex布局专属属性，只有给元素添加display: flex声明后才会生效，你当前未开启Flex布局，这两行配置完全无效。
• text-align: center 生效的前提是元素自身宽度大于文本内容宽度，你给<text>设置了position: absolute后，元素默认宽度会收缩到刚好适配文本宽度，文本和元素宽度一致，自然看不出居中效果。
• vertical-align 仅对行内元素、table单元格元素生效，对绝对定位元素无效，属于错用属性。

另外补充：<text>不是HTML标准的通用标签，更推荐用<span>、<div>这类标准标签实现，避免出现浏览器兼容性问题。

根据你要的居中场景，对应修改即可：

场景1：让文本在元素内部水平垂直居中 #

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;
  /* 按你的需求设置元素的宽度、高度 */
  width: 120px;
  height: 28px;
  /* 开启Flex布局，让之前写的两个flex属性生效 */
  display: flex;
  justify-content: center;
  align-items: center;
}

场景2：让整个元素在父容器中水平垂直居中 #

首先给的父容器（也就是它外层的col-6 col-sm-12 col-md-8元素）添加相对定位：

.col-6.col-sm-12.col-md-8 {
  position: relative;
}

再修改的样式：

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;
  /* 绝对定位居中偏移 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

内容的提问来源于stack exchange，提问作者Reem Al-Assaf