將文字放在圖像上

Question

無法解決此問題。嘗試了不同的事情，但沒有奏效。我想將文本放在圖像的正中央，但是它可能出現在圖像框下方，或者是它在整個圖像框下方的位置。絕對位置是我的代碼中幾乎不用的位置，因爲我的老師很關鍵，但我沒有找到任何其他方法來解決這個問題？

HTML

<div class="class"> 
<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="abc jme"> 
    <div class="texto"> 
    <h2>goalkeepers</h2> 
    </div> 
</div> 

CSS

.class{ 
    width:50%; 
    height:21vw; 
    float:left; 
    overflow: hidden; 
} 
.class img{ 
    width:100%; 
    height:120%; 
    margin-top:-3.5vw; 
    transition: ease-in-out 0.55s; 
} 

.class img:hover{ 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    opacity: 1; 
    transform:scale(1.05); 
} 
.texto h2{ 
    margin-top:0; 
    margin-left:0; 
    text-align: center; 
    position: relative; 
} 
.texto{ 
    width:auto; 
    height:auto; 
    margin:auto; 
    position: absolute; 
} 

樂小提琴：https://jsfiddle.net/32ed44cf/

Answer 1

這裏的技巧是你在中間想要的元素上添加position: relative父元素，然後position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)的父母。

在未來，這裏是爲如何中心的東西https://www.w3.org/Style/Examples/007/center.en.html

.class { 
 
    width: 50%; 
 
    height: 21vw; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.class img { 
 
    width: 100%; 
 
    height: 120%; 
 
    margin-top: -3.5vw; 
 
    transition: ease-in-out 0.55s; 
 
} 
 

 
.class img:hover { 
 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    opacity: 1; 
 
    transform: scale(1.05); 
 
} 
 

 
.texto h2 { 
 
    margin-top: 0; 
 
    margin-left: 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.texto { 
 
    width: auto; 
 
    height: auto; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="class"> 
 
    <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="abc jme"> 
 
    <div class="texto"> 
 
    <h2>goalkeepers</h2> 
 
    </div> 
 
</div>

一個很好的參考