在背景图片CSS Flexbox上垂直居中文本的问题[重复]答案

【问题标题】：Problem centering text vertically on background picture CSS Flexbox [duplicate]在背景图片CSS Flexbox上垂直居中文本的问题[重复]
【发布时间】：2021-01-27 19:34:33
【问题描述】：

我通常使用 justify-content、align-content、justify-items 和 align-items 居中没有问题，但在这种特殊情况下，我找不到解决方案，任何人都知道为什么它不在这种精确的情况下工作，解决方案是什么？

我希望文字在图片上垂直和水平对齐，但它们只是水平居中。

这里是 JSFiddle 链接：LINK HERE

CSS：

.services{
background-color: #fff;
}

.services .grid li{
padding: 20px;
height: 350px;
border-radius: 3px;

background-clip: content-box;
background-size: cover;
background-position: center;
background-color: #333;
}



.services .grid li.large{
flex-basis: 60%;
}

.services .grid li a {
color: red;
font-family: 'Open Sans', sans-serif;
background-color: green;

display: flex;
justify-content: center;
align-content: center;
}

HTML：

    <section id="services" class="services">
    <h3 class="title">Services</h3>
    <p>List of services.</p>
    <hr>

    <ul class="grid">
        <li class="large" style="background-image: url(assets/img/somepic.jpg);">
            <a class="servlink" href="#">Learn more</a>
        </li>
        
        <li class="large" style="background-image: url(assets/img/somepic.jpg);">
            <a class="servlink" href="#">Learn more</a>
        </li>
    </ul>
</section>

【问题讨论】：

父元素的flex属性

标签： css centering

【解决方案1】：

你可以添加：

position: relative;
top: 50%;
transform: translateY(-50%);

致您的.services .grid li a

【讨论】：