Html 如何制作内容居中的可点击响应方形框？

我有一组列，每个列包含一个方形框，填充到列宽并保持方形高度比

整个框需要是可点击的，其中的内容也在框内居中。我想不出一种获取内部

整个方块应该是红色的，完全可以点击，并且里面有一个居中的下载按钮

我已经回顾了一些关于用CSS制作方形框的类似问题，但是没有发现任何关于填充框的内部元素的问题

谢谢


.block{
宽度：100%；
身高：0；
垫底：100%；
边框：2倍实心#600；
}
.a座{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：#C00；
文字装饰：无；
}
.座跨{
填充：1em；
边框：2倍实心#FFF；
文本对齐：居中；
颜色：#FFF；
}
/*仅演示*/
.行{
显示器：flex；
证明内容：之间的空间；
}
.栏目{
宽度：20%；
}
将父级
.block
设置为
位置：相对
允许我们将
.block>a
设置为
位置：绝对
，其尺寸填充父级；我只添加了3条css规则，它们已被注释，因此您知道哪些规则：


.block{
位置：相对；/*变化#1*/
宽度：100%；
身高：0；
垫底：100%；
边框：2倍实心#600；
}
.a座{
位置：绝对；/*变化#2*/
左：0；右：0；顶部：0；底部：0；/*更改#3*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：#C00；
文字装饰：无；
}
.座跨{
填充：1em；
边框：2倍实心#FFF；
文本对齐：居中；
颜色：#FFF；
}
/*仅演示*/
.行{
显示器：flex；
证明内容：之间的空间；
}
.栏目{
宽度：20%；
}

您也可以共享更新的小提琴；）ops代码使得它很容易定稿，而且对于ops来说，添加的内容也不多，很容易理解。干得好！谢谢我知道这项技术，但出于某种原因，我没有想到在这里将其与flex结合使用。