CSSコンテンツの位置を変更します。

Question

以下のコードは、ホバー上の画像/テキストを変更して正常に動作します。しかし、私は、コンテンツの中にあるテキストをdivの中央に縦と横の両方に置く必要があります。

これはすでに水平方向にtext-align: center;に整列されていますので、垂直方向に整列させるだけです。何か案は？

.servicecircle { 
    width: 204px; 
    height: 204px; 
    background-image: url('secret.png'); 
    display: inline-block; 
    background-repeat: no-repeat; 
    margin-left: 22px; 
    margin-right: 22px; 
    /* Button transition*/ 
    -o-transition: .5s; 
    -ms-transition: .5s; 
    -moz-transition: .5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
} 

.servicecircle:hover{ 
    cursor: pointer; 
} 

.servicecircle:after { 
    width: 204px; 
    height: 204px; 
    display: inline-block; 
    background-repeat: no-repeat; 
    /* Button transition*/ 
    -o-transition: .5s; 
    -ms-transition: .5s; 
    -moz-transition: .5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
    /* Content is inserted */ 
    content: 'Service 1'; 
} 

.servicecircle:hover:after{ 
    background-image: url('secret.png'); 
    cursor: pointer; 
    content: 'Service Description..'; 
} 

私はvertical-align: middleを試みたが、それは何もしませんでした。

Answer 1

コンテンツが常に1行にとどまることがわかっている場合は、行の高さ（高さが設定されている行の高さと同じ）を安全に使用できます。ここ

Answer 2

はフレキシボックス・ブラウザ・サポートを使用して2つの溶液、すなわち（http://caniuse.com/#feat=flexbox）であり、第二は、テーブルを使用して、どこでもサポートされるべきである：/ [縦DIV内のテキストを揃える]（HTTPのhttps://jsfiddle.net/k95shxfL/4/

<div class="flexbox-vertical-middle"> 
    <div> 
    Service Description 
    </div> 
</div> 

<div class="table-vertical-middle"> 
    <div class="table-cell"> 
    Service Description 
    </div> 
</div> 

.flexbox-vertical-middle { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 

.table-vertical-middle { 
    display: table; 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 

.table-cell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
}