近日，微博上有朋友比较纠结未知高度的文本垂直居中问题。这个和「未知高度图片垂直居中」有些类似，但是有一些细节需要注意。
这里有之前写的一个未知宽高对话框的垂直居中（拖动改变大小看是不是依然居中？），只不过对话框是相对于 viewport（视口）居中的，这里的文字需要的是相对于容器垂直居中。
拿到这样的需求时，先不要想着如何兼容 IE6/7。先想想文字垂直居中靠什么属性？vertical-align: middle 对吧，好的，自然也就联系到了可爱的 inline-block。精心开发5年的UI前端框架！
主要的代码如下：
<body>
<div class=”box”>
<p class=”text”>
多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝
</p>
</div>
.box:before{
content: ‘我是那个备胎元素’;
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
.text{
display: inline-block;
font-size:16px;
vertical-align: middle;/* 保证文字垂直居中 */
}
vertical-align的对齐是需要有参照物的，那么box 容器通过 before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了。让我们一起来试试。精心开发5年的UI前端框架！
1.可以发现按照我们的思路，文字换行了，这是肿么了？Demo：
2.别急，既然「备胎」占用了本来文字的位置，那用 margin 负值试试，Demo。
好像还是不行捏？凌乱鸟~精心开发5年的UI前端框架！
还记得《inline-block 前世今生》中我们说到的 inline-block 元素间会产生空隙，难道是这货在捣乱？
3.还记得之前怎么处理空隙的吗？font-size:0 ！试试看
4.柳暗花明又一村，世界和谐了，那么最后只要隐藏掉 before 生成的内容即可，请看最终 Demo。
最后，记得把「content 」中的备胎去掉哦！兼容IE8+，Webkit，Firefox，Opera。（不要问我IE6怎么搞了，思路最重要）
看看高度改变时的动画演示：
诚然，以上是一种非常 Hack 的解决方案。本质上还是应该由 Flex 来解决，在面对这样的需求时候，思路很重要。
相关推荐
对于固定高度的多行文本，利用CSS的`display`属性来模拟表格特性，可以使`<div>`元素像`<table>`一样工作，从而实现垂直居中。具体步骤如下： 1. 将`<div>`的`display`属性设置为`table-cell`，因为`table-cell`...
对于有固定高度且包含多行文本的`div`，可以使用CSS3的`display: flex`属性来实现垂直居中。如下所示： ```css div { display: flex; justify-content: center; align-items: center; height: 100px; } `...
第二种方法适用于多行未知高度的文本垂直居中。通过设置相同的上下`padding`值，可以使内容在容器内垂直居中。这种方法的优点在于兼容性好，且适用于各种浏览器。需要保证容器高度是可伸缩的。 第三种情况是多行...
对于高度未知或动态变化的元素，可以使用`padding`来实现垂直居中。关键在于将上下`padding`设置为相等的值，这样可以确保内容在容器中居中显示。例如： ```css div { padding: 25px; } ``` 此方法同样适用于宽度...
- 不适用于包含多行文本或其他元素的情况。 ### 结论 以上介绍了五种实现 CSS 垂直居中的方法，每种方法都有其适用场景和限制条件。选择哪种方法取决于项目的具体需求以及所使用的浏览器环境。实际应用中，开发者...
一、单行文本垂直居中 对于单行文本的垂直居中，我们可以利用`line-height`属性。将`line-height`设置为与div的实际高度相等，可以实现文本在该div内垂直居中。以下是一个简单的例子： ```css div { height: 25px...
1. **单行文本垂直居中** 对于只有一个行高（line-height）的容器，设置其高度与行高相等可以实现垂直居中。例如： ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 这种方法在...
2. 多行文本垂直居中： - 父级元素高度不固定： 当父级元素的高度由内容决定时，可以使用相等的上下内填充`padding`来实现视觉上的垂直居中： ```css #div1 { width: 300px; margin: 50px auto; border: 1px...
**一、单行文本垂直居中** 对于只包含一行文本的`<div>`，我们可以利用`line-height`和`height`相等的方法实现垂直居中。这种方法简单有效，但要求`div`的实际高度与内容的行高一致。例如： ```css div { height: ...
实现水平垂直居中的效果是前端开发中经常遇到的需求，无论是在PC端还是移动端，这一点对于提升用户体验尤为重要。要实现水平垂直居中，我们可以利用CSS的多种属性和方法。以下详细介绍了几种不同的实现方案： 第一...
2. **多行文字垂直居中** - **高度固定容器**：直接设置上下`padding`值相等。 - **高度未知容器**：利用`line-height`配合`display:inline-block`和`vertical-align:middle`，以及空元素进行调整，例如： ```...
可以通过设置CSS的`text-overflow`, `white-space`, `overflow`属性来实现多行文本的省略效果。 #### Visibility=hidden, Opacity=0, Display=None的差别 visibility: hidden使得元素不可见但仍然占据空间；opacity...
- T: 多行文本 - DT: 单行文本 - LW: 线宽设置 - AA: 面积 - DI: 距离 - UN: 图形单位 - DS: 捕捉间距 - D: 标注样式 - DRE: 关联标注 - DDA: 删除关联性标注 - LT: 线形管理器 - LTS: 线形比例因子 - ...