Горизонтально и вертикально текст центра над HTML-изображением (Абсолютное позиционирование)

Question

Учитывая следующий элемент дизайна, я пытаюсь включить изображения в html, чтобы с помощью непрозрачности можно было использовать css-переходы (эффект зависания).

Вот мое решение до сих пор: http://codepen.io/roachdesign/pen/VeQKJK/

Основным недостатком является то, что я использую ручной вертикальное центрирование (абсолютная/верх: 40%), что становится очевидным при усадке браузер.

Можно ли применять вертикальное центрирование с помощью гибкой коробки или столов при работе с абсолютным позиционированием?

HTML

<div class="badge-container"> 
    <a href=""> 
    <div class="badge"> 
     <img src="http://www.placehold.it/400x400/FF9999"> 
     <h2><strong>Cumberland</strong>County</h2> 
    </div> 
    </a> 
    <a href=""> 
    <div class="badge"> 
     <img src="http://www.placehold.it/400x400/99FF99"> 
     <h2><strong>Dauphin</strong>County</h2> 
    </div> 
    </a> 
    <a href=""> 
    <div class="badge"> 
     <img src="http://www.placehold.it/400x400/9999FF"> 
     <h2><strong>Lancaster</strong>County</h2> 
    </div> 
    </a> 
    <a href=""> 
    <div class="badge"> 
     <img src="http://www.placehold.it/400x400/9F9F99"> 
     <h2><strong>Lebanon</strong>County</h2> 
    </div> 
    </a> 
    <a href=""> 
    <div class="badge"> 
     <img src="http://www.placehold.it/400x400"> 
     <h2><strong>York</strong>County</h2> 
    </div> 
    </a> 
</div> 

SCSS

.badge-container {display:flex; flex-direction:row; 
    .badge {position:relative;} 
    h2 {position:absolute; 
     top:36%; 
     left:0; 
     right:0; 
     text-align:center; 
     strong {display:block;} 
    } 
} 

img {max-width:100%;} 

Answer 1

Вы можете использовать прообразы

h2 { 
    position:absolute; 
    top:50%; 
    left:50%; 
    text-align:center; 
    transform: translateX(-50%) translateY(-50%); 
} 

И не забудьте очистить поля от h2 Вот working demo

Answer 2

вы можете продолжать использовать гибкий для h2 слишком

.badge-container, 
 
h2 { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
.badge-container .badge { 
 
    position: relative; 
 
} 
 
.badge h2 { 
 
    margin: 0; 
 
    position: absolute; 
 
    justify-content: center; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    flex-direction:column; 
 
} 
 
.badge-container h2 strong {} img { 
 
    max-width: 100%; 
 
}

<div class="badge-container"> 
 
    <a href=""> 
 
    <div class="badge"> 
 
     <img src="http://www.placehold.it/400x400/FF9999"> 
 
     <h2><strong>Cumberland</strong>County</h2> 
 
    </div> 
 
    </a> 
 

 
    <a href=""> 
 
    <div class="badge"> 
 
     <img src="http://www.placehold.it/400x400/99FF99"> 
 
     <h2><strong>Dauphin</strong>County</h2> 
 
    </div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="badge"> 
 
     <img src="http://www.placehold.it/400x400/9999FF"> 
 
     <h2><strong>Lancaster</strong>County</h2> 
 
    </div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="badge"> 
 
     <img src="http://www.placehold.it/400x400/9F9F99"> 
 
     <h2><strong>Lebanon</strong>County</h2> 
 
    </div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="badge"> 
 
     <img src="http://www.placehold.it/400x400"> 
 
     <h2><strong>York</strong>County</h2> 
 
    </div> 
 
    </a> 
 
</div>

http://codepen.io/anon/pen/BjYQvv