Html 动态高度包装中垂直居中的文本

我通常只使用线条高度来进行垂直居中，但在这种情况下，我正在处理的布局有点棘手

我把这个jsfiddle放在一起，以显示我目前所处的位置。所有CSS黑客都建议为此使用表格单元格技巧，但我只能在包装有绝对高度的情况下才能使其工作，因此对我来说，此文本不是垂直居中的：

<div class="wrap">
    <a href="#">
        <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
        <span class="text"><span>Text that might span multiple lines</span></span>
    </a>
</div>

我基本上需要的是文本，不管它跨越了多少行，坐在图像的中间。图像不能是背景图像，我不能将固定的宽度或高度附加到包装上

包装器在一个更大的页面模板中模拟一个响应列，我需要该图像来保留您看到的该列的全宽。如果需要，可以在列中添加其他HTML

想法？

Flexbox可以做到这一点

.wrap{
高度：自动；
位置：相对位置；
宽度：50%；
}
.包一个img{
高度：自动；
宽度：100%；
}
.包装一个span.text{
身高：100%；
左：0；
位置：绝对位置；
文本对齐：居中；
排名：0；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.换行一个span.文本span{
颜色：#fff；
字体大小：20px；
字体大小：粗体；
线高：1.25
}

Flexbox可以做到这一点

.wrap{
高度：自动；
位置：相对位置；
宽度：50%；
}
.包一个img{
高度：自动；
宽度：100%；
}
.包装一个span.text{
身高：100%；
左：0；
位置：绝对位置；
文本对齐：居中；
排名：0；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.换行一个span.文本span{
颜色：#fff；
字体大小：20px；
字体大小：粗体；
线高：1.25
}

---

我也会将flex用于您的解决方案

.wrap a .text {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top:0;
  display: flex; 
  display: -webkit-box;    
  display: -moz-box;       
  display: -ms-flexbox;    
  display: -webkit-flex;    
  justify-content: center;
  align-items: center;
}

---

我也会使用flex作为您的解决方案

.wrap a .text {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top:0;
  display: flex; 
  display: -webkit-box;    
  display: -moz-box;       
  display: -ms-flexbox;    
  display: -webkit-flex;    
  justify-content: center;
  align-items: center;
}

---

我认为最好使用translateY，它可以在更多的设备上工作

//CSS
.wrap {
  height: auto;
  position: relative;
  width: 50%;
}

.wrap a img {
  height: auto;
  width: 100%;
}

.wrap span {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 30px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);  
  display:block;
  position:absolute;
  text-align:center;
}

//HTML
<div class="wrap">
<a href="#">
  <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
  <span>Text that might span multiple lines</span>
</a>
</div>

//CSS
.包裹{
高度：自动；
位置：相对位置；
宽度：50%；
}
.包一个img{
高度：自动；
宽度：100%；
}
.包裹跨度{
颜色：#fff；
字号：26px；
字体大小：粗体；
线高：30px；
垂直对齐：中间对齐；
最高：50%；
转化：translateY（-50%）；
显示：块；
位置：绝对位置；
文本对齐：居中；
}
//HTML

---

我认为最好使用translateY，它可以在更多的设备上工作

//CSS
.wrap {
  height: auto;
  position: relative;
  width: 50%;
}

.wrap a img {
  height: auto;
  width: 100%;
}

.wrap span {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 30px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);  
  display:block;
  position:absolute;
  text-align:center;
}

//HTML
<div class="wrap">
<a href="#">
  <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
  <span>Text that might span multiple lines</span>
</a>
</div>

//CSS
.包裹{
高度：自动；
位置：相对位置；
宽度：50%；
}
.包一个img{
高度：自动；
宽度：100%；
}
.包裹跨度{
颜色：#fff；
字号：26px；
字体大小：粗体；
线高：30px；
垂直对齐：中间对齐；
最高：50%；
转化：translateY（-50%）；
显示：块；
位置：绝对位置；
文本对齐：居中；
}
//HTML