在 HTML 图像上水平和垂直居中文本（绝对定位）答案

【问题标题】：Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)在 HTML 图像上水平和垂直居中文本（绝对定位）
【发布时间】：2016-01-23 05:40:53
【问题描述】：

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

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

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

在使用绝对定位时，是否可以使用 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%;}

【问题讨论】：

我建议看看this answer here。它涵盖了垂直/水平居中文本的多种不同方法。
this is a fun site too
对于图像上的文字，请尝试以下解决方案：geekgirllife.com/…
@JoshCrozier 我尝试了每一个，但边缘/翻译方法，当然它在列表中排名第一，哈哈

标签： html css flexbox

【解决方案1】：

你可以使用变换

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

别忘了清除h2 的边距这是working demo

【讨论】：

op 应该使用转换！除非必须支持 IE8。
@Hritik 因为你用 SCSS 编写代码，但在 codepen 你选择语法 CSS。切换到 SCSS 就可以了。

【解决方案2】：

你也可以继续为 h2 使用 flex

.badge-container,
h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.badge-container .badge {
  position: relative;
}
.badge h2 {
  margin: 0;
  position: absolute;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex-direction:column;
}
.badge-container h2 strong {} img {
  max-width: 100%;
}

<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>

http://codepen.io/anon/pen/BjYQvv

【讨论】：