水平及；将文本垂直居中放置在HTML图像上（绝对位置）

考虑到下面的设计元素，我试图在html中包含图像，这样就可以通过css转换（悬停效果）操纵不透明度

到目前为止，我的解决方案如下：

这里的主要缺点是我使用的是手动垂直居中（绝对/顶部：40%），这在收缩浏览器时变得很明显

使用绝对定位时，是否可以使用flexbox或工作台进行垂直定心

HTML

可以使用变换

h2 {
  position:absolute;
  top:50%;
  left:50%; 
  text-align:center;
  transform: translateX(-50%) translateY(-50%);
}

不要忘记清除

h2的边距
这里有一个
您也可以继续使用flex来处理h2


.badge容器，
氢{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.徽章容器.徽章{
位置：相对位置；
}
.徽章h2{
保证金：0；
位置：绝对位置；
证明内容：中心；
排名：0；
左：0；
身高：100%；
宽度：100%；
弯曲方向：立柱；
}
.badge容器h2 strong{}img{
最大宽度：100%；
}

我建议看一看。它涵盖了垂直/水平居中文本的多种不同方法。对于图像上的文本，请尝试以下解决方案：@JoshCrozier我尝试了除边距/平移方法之外的所有方法，当然，它是列表中的#1 lolop应该使用变换！除非必须支持IE8。@Hritik，因为您在SCS中编写代码，但在codepen中选择语法CSS。切换到SCSS，它就会工作。
.badge-container {display:flex; flex-direction:row; 
  .badge {position:relative;}
  h2 {position:absolute;
      top:36%;
      left:0; 
      right:0;
      text-align:center;
      strong {display:block;}
  }
}

img {max-width:100%;}

h2 {
  position:absolute;
  top:50%;
  left:50%; 
  text-align:center;
  transform: translateX(-50%) translateY(-50%);
}