html - down - 이미지 hover 효과

세로 가리키는 콘텐츠 정렬 (4)

스택에 관한 많은 기사를 보았지만 이에 대한 해답을 찾을 수 없습니다.

이미지를 가리키면 콘텐츠를 표시하려고합니다. 나는 이것을했다. 그러나 나는 그것을 수직적으로 중심에 둘 필요가있다. 일부 블록에는 여러 줄이 생길 것입니다. 여기 JSFiddle을 만들었습니다 : https://jsfiddle.net/wkmepjnk/

어떤 도움이라도 좋을 것입니다! 고맙습니다

내 HTML은 :

<div class="grid-wrapper">

                <div class="grid-single">
                    <img src="images/qdeck-logo.png">
                        <div class="grid-content">
                        <span>
                            <div class="hover-content">
                            <h1>QDeck</h1>
                            <p>Q-Deck® decking or deckboards are available in four standard timber profiles, two anti-slip resistant timber profiles known as Q-Grip® and a composite profile in a range of colours known as Q-Deck Twinson.</p>
                            <div class="hover-button">More Info</div>
                            </div>
                        </span>
                    </div>
                </div>
                <!--Close Grid Single-->


            </div>
            <!--Close Grid Wrapper-->

내 CSS :

.grid-wrapper {
    width:100%;
    height:auto;
    background-color:#ffffff;
    -webkit-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
}

.grid-single {
    width:25%;
    height:auto;
    margin-right:-5px;
    display:inline-block;
    border:1px solid #e0e3e6;
    position: relative;
}

.grid-single h1 {
    font-family: 'montserratlight';
    font-size:25px;
    line-height:30px;
    color:#ffffff;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

.grid-single img {
    width:100%;
    height:auto;
    margin-bottom:-5px;
}

.grid-single .grid-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1ABC9C;
    opacity: 0;
    transition: opacity 0.1s;
    text-align:left;
}

.grid-single .grid-content span {
    display: block;
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:auto;
    text-align:center;
}

.grid-single .grid-content span p { 
    font-family: 'montserratlight';
    font-size:14px;
    line-height:21px;
    color:#ffffff;
    margin-bottom:15px;
    letter-spacing:0px;
}

.grid-single .grid-content span p strong {  
    color:#a1cc3a;
    margin-bottom:4px;
}

.grid-single:hover .grid-content {
    opacity: 1;
}

.hover-button {
    display:inline-block;
    width:auto;
    height:40px;
    background-color:#2C3E50;
    padding:0px 20px;

    font-family: 'montserratlight';
    font-size:15px;
    line-height:40px;
    color:#ffffff;

}