行高与填充垂直居中一行文本

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

对我来说，这两种方法都适用于保证文本行只跨越一行的情况（通过固定容器宽度的性质或通过操纵内容 and/or CSS white-space 属性), 但这取决于你的意图，哪个更合适：

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

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

行高与填充垂直居中一行文本

Line-height vs paddings to vertically center one-lined text

html

css

centering