html - 如何在响应式图像上垂直居中文本？

Question

当浏览器窗口调整大小时，如何让这些图像上的标题文字四处移动？我的实现很不稳定，我需要一种方法来防止文本在调整窗口大小时左右滑动。

Codepen

<div class="row">
  <div class="col-md-6">
    <img src="http://placekitten.com/600/375" class="img-responsive" />
    <h2 class="homeImageLink">
      <span>Caption Text</span>
    </h2>
  </div>
  <div class="col-md-6">
    <img src="http://placekitten.com/600/375" class="img-responsive" />
    <h2 class="homeImageLink">
      <span>Caption Text</span>
    </h2>
  </div>
</div>

.homeImageLink {
   position: absolute; 
   top: 110px; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.homeImageLink span { 
    color: red;
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 15px;
    pointer-events: none;
}

Answer 1

只需将一个类添加到父容器，使其位置相对。

.img-container {
  position:relative;
}

然后使 homeImageLink 成为绝对链接并在 45% 左右给出顶部。

它会让它垂直居中..

.homeImageLink {
   position: absolute; 
   top: calc(50% - 24px); //24px is font size of H1 I assume 
   left: 0;
   text-align: center; 
   width: 100%; 
}

此处演示:http://codepen.io/anon/pen/bJadE