css - 如何在绝对定位的响应图像上垂直和水平居中文本？

Question

我研究了很多帖子，但没有一个与我自己的情况完全相关，我一辈子都弄不明白这个。我在绝对定位的容器内有一个响应图像。页面上有很多这样的图片，它是图片库网格，但每张图片的宽度和高度都不同。

我需要图像上的链接来读取“查看元素”，使其在垂直和水平方向上准确居中。我可以通过从图像顶部设置最佳拟合百分比边距来手动执行此操作，但是页面上所有图像的代码时间都非常多，就像我说的那样，它们的宽度和高度都不同。

我的基本代码是这样的..

<div class="item" style="position: absolute; left: 0px; top: 0px;">
  <a href="link-to-view-project-on-a-different-page.html" title="">
    <img style="width: 100%;" alt="" src="http://placekitten.com/600/400">
    <h2>View Project</h2>
  </a>
</div>

Answer 1

根据浏览器支持，您可以使用具有绝对定位的 css 转换。例如:

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

Demo

如果浏览器支持有问题，您可以使用负边距来获得类似的结果。例如:

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px; /* This value should be half the height of the h2 element */
  margin-left: -5px; /* This value should be half the width of the h2 element */
}