垂直居中懸停字幕

Question

使用以下代碼可以垂直居中懸停字幕嗎？我知道我可以添加一個圍繞figcaption標籤的div來做覆蓋，但我想知道是否可以在不添加更多HTML代碼的情況下做同樣的事情。

HTML：

<figure class="caption"> 
    <img src="image.jpg" alt="" /> 
    <figcaption class="caption-text">Some text</figcaption> 
</figure> 

CSS：

.caption { 
    position: relative; 
} 

.caption img { 
    display: block; 
    margin: 0; 
} 

.caption-text { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    text-align: center; 
} 

.caption:hover .caption-text { 
    display: block; 
    background: rgba(30, 30, 30, 0.7); 
} 

在此先感謝

Answer 1

您可以使用Flexbox的.caption-text

.caption { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.caption img { 
 
    display: block; 
 
    margin: 0; 
 
} 
 

 
.caption-text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: #fff; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in; 
 
} 
 

 
.caption:hover .caption-text { 
 
    background: rgba(30, 30, 30, 0.7); 
 
    opacity: 1; 
 
}

<figure class="caption"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <figcaption class="caption-text">Some text</figcaption> 
 
</figure>