本文探讨了如何使用CSS的line-height、display:table-cell和transform:translateY(-50%)属性来实现元素的垂直居中。内容涵盖了不同方法的适用场景，包括对于多行文本的支持，以及对旧版浏览器的兼容性处理。同时，提到了使用transform属性的垂直居中方法可能在某些旧版浏览器中不被支持的情况。
你可以使用line-height：50px;你不需要vertical-align：middle;那里。
如果你有多行，上面的将会失败，所以在这种情况下，你可以使用span包装你的文本，而不是使用display：table-cell;和display：table;与vertical-align：middle;也不要忘记使用width：100％; for #abc
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
我可以想到的另一个解决方案是使用translateY()的transform属性，其中Y显然代表Y轴。这是非常直接的…所有你需要做的是将元素位置设置为绝对，后来位置50％的顶部，并从它的轴翻译为负-50％
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
请注意，旧版浏览器(例如IE8)不支持此功能，但您可以分别使用-ms，-moz和-webkit前缀制作IE9和其他旧浏览器版本的Chrome和Firefox。
有关transform的更多信息，可以参考here。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
