如何使用 CSS 将 1 或 2 行文本动态垂直居中？ [复制]答案

【问题标题】：How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]如何使用 CSS 将 1 或 2 行文本动态垂直居中？ [复制]
【发布时间】：2020-05-07 09:25:08
【问题描述】：

请注意随附的图像/线框。如何使用 CSS 构建此元素。如果有一行文本垂直居中但也支持 2 行也垂直居中？

【问题讨论】：

右边的圆圈总是一样大吗？
将您的 div 视为表格单元格是最好的方法。看看这篇文章：css-tricks.com/vertically-center-multi-lined-text
你试过的小提琴在哪里/
圆的大小始终相同。

标签： html css

【解决方案1】：

您可以通过使您的包装 div display:table: 和您的内部文本 div display:table-cell 来实现这一点。请参见下面的示例：

HTML：

<div class="wrapper">
    <div class="inner">
        One Line</br>
        Two Line</br>
        Three Line</br>
    </div>
</div>

CSS：

.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}

.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}

小提琴： http://jsfiddle.net/pgwL47oy/1/

【讨论】：

【解决方案2】：

这已在对您问题的评论中提到，但通常使用 display: table-cell; 和 vertical-align: middle; 是您所追求的。

我们的想法是让父容器显示为带有display: table; 的表格，然后您用来包含这些文本节点的跨度或段落元素被赋予上面的table-cell 显示和vertical-align .

它以前对我有用，应该值得一试！

Here's a CSS Tricks article that could help you out further

希望对您有所帮助！ :)

【讨论】：