html - 在图像上居中内容

Question

我想在图像上放置一个自制的小标题，但效果不太好。我不确定我做错了什么，但这是一个显示我正在使用的 fiddle :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-center 设置的大小如何，它都会恰好漂浮在中间。

谢谢!

Answer 1

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%);。
这是一种常见的居中技术。