如何仅用text-align与vertical-align实现容器文本居中及后者适用场景

首先要纠正一个常见误区：vertical-align没有center这个取值，实现垂直居中用的是vertical-align: middle。以下是不依赖flex和position:absolute的实现方案：

1. 通用多行文本方案 #

利用vertical-align在表格单元格环境下的生效特性：

• 给容器设置display: table-cell，同时定义宽高（或由内容撑开）
• 容器添加text-align: center完成水平居中
• 容器添加vertical-align: middle完成垂直居中
  示例代码：

.center-container {
  display: table-cell;
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
}

<div class="center-container">
  这是多行测试文本<br>
  可以完美实现水平垂直居中
</div>

2. 单行文本简化方案 #

如果仅需处理单行文本，也可以结合行高实现：

• 容器设置height与line-height相等，配合text-align: center
• 这里vertical-align: middle可省略，因为行高等于容器高度时单行文本自然垂直居中，若要显式使用该属性，确保文本为行内元素即可
  示例代码：

.single-line-center {
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px solid #ddd;
}

<div class="single-line-center">这是单行居中文本</div>

• 表格单元格内容对齐：原生<td>、<th>标签默认支持该属性，设置后可让单元格内的文字、图片等内容垂直居中，这是该属性最经典的使用场景
• 行内/行内块元素同行对齐：同一行内的行内元素（如<span>、<img>）或行内块元素（如自定义的display: inline-block元素），可以用vertical-align: middle调整垂直对齐关系，比如让图标和文字居中对齐
• 模拟表格布局的块级容器：当块级元素设置display: table-cell后，可像表格单元格一样使用vertical-align: middle实现内容垂直居中，也就是前面的通用居中方案
• 表单元素对齐优化：在表单中，<input>、<label>、<select>等行内元素常存在垂直错位问题，用vertical-align: middle可以快速统一它们的垂直对齐方式，提升表单视觉一致性

内容的提问来源于stack exchange，提问作者Honnappa