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

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绝对定位转变。 E.g：

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

Demo

如果浏览器支持，您可以使用负利润来实现类似的效果的问题。 E.g：

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 */ 
} 

Answer 2

这里是工作提琴http://jsfiddle.net/xnjy0dar/

基本上你想要的包装的形象和H2元素。将包装器设置为角落中的绝对位置或您希望图像出现的位置。也将h2设置为绝对位置。包装将完全与图像一样大。现在像这样定位h2。

.image1 { 
    top: 0; 
    left: 0; 
} 
.image2 { 
    top: 200px; 
    left: 0; 
} 
.image1, .image2 { 
    position: absolute; 
    text-align: center; 
} 
.image1 h2, .image2 h2 { 
    position: absolute; 
    display: block; 
    width: 100%; 
    top: 50%; 
    margin-top: -14px; 
    margin-bottom: 0; 
    left: 0; 
} 

它是margin-top的原因：-14px是为了补偿h2的高度。在这个例子中，14px是h2高度的一半，所以要相应地调整。

下面是HTML：

<div class="image1"> 
    <img src="http://placehold.it/350x150" /> 
    <h2>View Project</h2> 
</div> 
<div class="image2"> 
    <img src="http://placehold.it/150x250" /> 
    <h2>View Project</h2> 
</div>