Html 如何在可变大小的块中确定文本中心？

我几乎什么都试过了，但也许我的情况太具体了。我有几个街区的行之间没有空格，我需要绝对居中，你们可以看到，当是2行时，它不居中

1我可以有一行或多行，因此在这种情况下不能使用行高解决方案

2 flex解决方案不适用于iPhone

3块的宽度和高度是可变的

4像personal和buchhaltung这样的文本不能重叠。当鼠标悬停时，块的鼠标悬停会变得五颜六色

---

我不明白为什么flex解决方案不起作用。您是否尝试过在其中创建div并使用flex解决方案

绝对的{ 位置：绝对： 排名：0； 左：0； 宽度：100%； } 柔性箱{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 宽度：300px； 高度：300px； 背景：蓝色； } flexbox内容{ 文本对齐：居中； 颜色：白色； } 它起作用了！ 多行

还有其他更好的居中方法。这一个的主要问题是当跨度有太多的内容供父级容纳时，因为它将溢出。可能存在修复方法，但对于您的情况，这样就可以了

以下是您提到的iPhone的完整前缀代码：

.组合瓷砖{ 位置：相对位置； } .组合瓷砖跨度{ 最大宽度：100%； 位置：绝对位置； 最高：50%； 左：50%； -webkit转换：翻译-50%，-50%； -moz变换：平移-50%，平移-50%； -ms转换：翻译-50%，-50%； -o变换：平移-50%，平移-50%； 转化：转化-50%，-50%； }

.portfolio-tile span {
  width:100%;
  position: absolute;
  z-index:999;
  top:0;
  left:0;
  right:0;
  margin:0;

  text-align: center;}

.portfolio-tile {
   position: relative;
}
.portfolio-tile span {
   max-width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}