响应式菱形，中心对齐内容，使用变换旋转

Question

我很难在100％x 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这样做的正确方法是什么？

修改

有几个问题是我使用的是80％宽的图像，其高度未知，而且sqaure（现在的钻石）的高度也是未知的，因为25％的底部填充。

请take a look at my fiddle。

Answer 1

如果您在cover-diamond上有和顶部填充：

padding: 12.5% 0;

...您可以简单地将translateY(-50%)添加到您的转换中：

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

您还可以删除这些样式：

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

Working Fiddle