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

Question

我在尝试在 100% x 100% 容器的中心创建一个居中、响应灵敏的菱形形状时遇到了很大的困难，菱形包含一个居中对齐的徽标。听起来很混乱？嗯，这就是我的意思：

（图像是 self-drawn 图形）

我已经设法使响应式菱形形状正常工作，并使用以下方法使 window 居中：

.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% 宽的图像，高度未知，而正方形（现在是菱形）的高度也未知，因为底部填充为 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

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

Responsive diamond shape with center aligned content using transform rotate

html

css

transform

rotation

centering