Word文字上下垂直居中
CSS实现文字垂直居中的完整指南
什么是文字垂直居中？
在网页设计中，文字的垂直居中是一个常见的需求。当我们要在一个固定高度的容器中让文字既在水平方向又在垂直方向居中时，就需要使用特定的CSS技术来实现。
本文将介绍几种最常用且兼容性良好的实现方法。
方法一：Flexbox（推荐）
Flexbox是现代CSS中最简单、最强大的布局工具之一，实现垂直居中只需几行代码。
<!-- HTML -->
<div class="box">
<span>居中文字</span>
</div>
/* CSS */
.box {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
方法二：Line-height法
当容器高度固定且只有一行文字时，可以设置line-height等于容器高度来实现垂直居中。
/* CSS */
.box {
height: 120px;
line-height: 120px;
text-align: center;
}
.box span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
方法三：Transform法
使用绝对定位配合transform属性，可以实现任意内容的居中，不受容器尺寸限制。
/* CSS */
.box {
position: relative;
height: 120px;
}
.box span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
总结
以上三种方法各有优缺点：
Flexbox：最现代、最灵活，推荐在现代浏览器中使用。
Line-height：简单直接，但仅适用于单行文本且高度固定的场景。
Transform：兼容性好，适合需要精确定位的复杂布局。
根据实际项目需求选择合适的方法，可以让您的网页布局更加完美。