Отзывчивая алмазная форма с центрированным контентом с использованием поворота поворота

Question

У меня возникли большие трудности с попыткой создать центрированную, отзывчивую алмазную форму в центре контейнера 100% х 100% с бриллиантом, содержащим выровненный по центру логотип. Звук запутанный? Ну, это то, что я имею в виду:

(изображения являются самостоятельно нарисованные графики)

мне удалось получить ответная ромб работает отлично и центрируется в окне с помощью этого:

.cover-diamond { 
    position: absolute; 
    z-index: 3; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    width: 25%; 
    height: 0; 
    padding-bottom: 25%; 
    border: solid 1px #EBC65A; 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Но чувство довольно самоубийству после попытки центрирования <img> логотипа в середине, так как это результат:

Я пробовал много вариантов и полностью потерял следы того, что я пробовал. Я пробовал display:table-cell и vertical-align:middle Каков правильный способ сделать это?

EDIT:

Несколько проблем является тот факт, я использую широкий изображение 80% с неизвестной высотой и фактически Sqaure (алмазов в настоящее время) имеет неизвестную высоту тоже, из-за 25 % нижнего заполнения.

take a look at my fiddle.

Answer 1

Если вы можете иметь верхнюю и нижний отступы на cover-diamond:

padding: 12.5% 0; 

& hellip; вы можете просто приписать translateY(-50%) к файлу преобразования:

transform: translateY(-50%) rotate(-45deg); 

Вы также можете удалить эти стили:

display: table-cell; 
vertical-align: middle; 

Working Fiddle