Question

我可以使用line-height垂直居中单行文字，也可以使用padding-top和padding-bottom垂直居中。

各自的优点和缺点是什么？

body {
    font-size: 12px;
    font-family: sans-serif;
}

div {
    border: 1px solid #333;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}

.vcenter1 {
    line-height: 50px;
}

.vcenter2 {
    padding-top: 19px;
    padding-bottom: 19px;
}

<div class="vcenter1">Lorem ipsum line-height...</div>

<div class="vcenter2">Lorem ipsum padding...</div>

Answer 1

纯粹就垂直居中而言，重要的不是记录。但请注意，在第二种情况下，您在一个高度与字体大小成比例的线框周围填充。默认情况下，不同的浏览器使用略微不同的比例，因此在不同的浏览器中，带边框的大小会有所不同。这在第一种情况下不会发生。

Answer 2

对我来说，这两种方法都适用于保证文本行只能跨越一行的情况（根据容器宽度的性质固定或通过操纵内容和/或CSS {{1} } property），但这取决于你更合适的意图：

如果您希望修复包含文本的元素的高度，那么使用white-space似乎最合适且可维护，因为字体大小的更改不会影响容器的高度（除非字体变得比容器高）。
但是，如果容器的高度没有固定，并且字体两侧的空白区域保持更重要，那么填充是更合适的选择。

当然还有其他方法可以在一个元素中垂直居中文本，前一个问题How do I vertically center text with CSS?有很多有关该主题的有用信息。

行高与填充以垂直居中的单行文本

2 个答案: