html - 在 HTML 图像上水平和垂直居中文本(绝对定位)

Question

鉴于以下设计元素，我试图在 html 中包含图像，以便可以使用 css 转换(悬停效果)来操纵不透明度。

到目前为止，这是我的解决方案:http://codepen.io/roachdesign/pen/VeQKJK/

这里的主要缺点是我使用的是手动垂直居中(绝对/顶部:4​​0%)，这在缩小浏览器时会变得很明显。

在使用绝对定位时，是否可以对 flexbox 或表格应用垂直居中？

HTML

<div class="badge-container">
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/FF9999">
        <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/99FF99">
        <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9999FF">
        <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9F9F99">
        <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400">
        <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

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%;}

Answer 1

你可以使用转换

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

并且不要忘记清除 h2 的边距 这是一个working demo