文本在背景图片上垂直居中的问题 CSS Flexbox

Question

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

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

这是 JSFiddle link：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>

Answer 1

您只需添加：

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

给你的.services .grid li a

文本在背景图片上垂直居中的问题 CSS Flexbox

Problem centering text vertically on background picture CSS Flexbox

css

centering