html - 将内容放在图像上

我正在尝试在图像上添加一些自制字幕，但是它不太正常。我不确定自己在做什么错，但是这里有一个小提琴，显示了我正在使用的工具：https://jsfiddle.net/efvL28o0/。

html

<div class= "container-fluid">
<div class="row">
    <div class="col-md-3">
        <a href="" class="rel-tile" >
                <img src="http://via.placeholder.com/1000x500" width="100%">
            <span class="btn-center text-center caption-custom">About Me</span>
        </a>
    </div>
    <div class="col-md-3">
        <a href="" class="rel-tile">
            <img src="http://via.placeholder.com/1000x500" alt="" width="100%">
            <span class="btn-center text-center">Lineage</span>
        </a>
    </div>
    <div class="col-md-3">
        <a href="" class="rel-tile">
            <img src="http://via.placeholder.com/1000x500" alt="" width="100%">
            <span class="btn-center text-center">Contact Me</span>
        </a>
    </div>
    <div class="col-md-3">
        <a href="" class="rel-tile">
            <img src="http://via.placeholder.com/1000x500" alt="" width="100%">
            <span class="btn-center text-center">Gallery</span>
        </a>
    </div>
</div>
</div>

的CSS

        .rel-tile {
        position: relative;
    }

    .btn-center {
        position: absolute;
        top: 45%;
        opacity: 0.6;
        left:45%;
        background-color: black;
        color: white;
        text-decoration: none;
    }

理想情况下，无论我为btn中心设置的大小如何，它都将精确地漂浮在中间。

谢谢！

最佳答案

https://jsfiddle.net/bsalex/byqa4qng/3/

将.btn-center样式更改为：

.btn-center {
            position: absolute;
            top: 50%;
            opacity: 0.6;
            left:50%;
            background-color: black;
            color: white;
            text-decoration: none;
            transform: translate(-50%, -50%);
        }

这里的主要部分是transform: translate(-50%, -50%);。
它是常见的居中技术之一。

关于html - 将内容放在图像上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48030206/