<分区>
html - 如何在可变大小的 block 中居中放置文本？
我几乎尝试了所有方法，但也许我的情况太具体了。我有几个 block (行)之间没有空格，我需要将它绝对居中，正如你所看到的，当是 2 行时它没有居中。
1) 我可以有一行或多行，所以在这种情况下我不能使用行高解决方案。
2) flex 解决方案不适用于 iPhone。
3) block 宽高可变
4) 像“personal & buchhaltung”这样的文字不能与 block 的鼠标悬停重叠(鼠标悬停时变为彩色)
.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%);
}
还有其他更好的居中方法。这个问题的主要问题是当 span 的内容太多而父级无法容纳时，因为它会溢出。存在可能的修复方法，但对于您的情况，这就可以了。
这是完整的前缀代码(你提到了 iPhone):
.portfolio-tile {
position: relative;
}
.portfolio-tile span {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}使用autoprefixer在部署到生产环境之前为您的 CSS 添加前缀。对于最大浏览器兼容性，使用 > 0% 作为设置(底部的小输入)。
关于html - 如何在可变大小的 block 中居中放置文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42275988/