text-align仅控制块内行内内容的水平对齐，不影响块容器自身位置；多行垂直居中需flex/grid；表格中vertical-align是唯一可靠方案；Canvas多行需手动拆分计算。
text-align 对多行
或
有效，但只管“内容对齐”，不管“容器居中”
很多人加了 text-align: center 发现文字没居中，其实是误用了对象：它只让块内文字（或图片等行内内容）在该块的可用宽度内按规则对齐，不会移动块本身。比如：
<p style="text-align: right">这是一段很长的文字，会右对齐，但p标签仍占据整行宽度</p>- 若想让整个
<p>在页面中水平居中，得额外给它设width+margin: 0 auto，否则text-align再强也拉不动容器位置 - 对多行文本，
text-align: justify会强制两端对齐，但中文效果常不理想——浏览器可能在字间塞空格，导致间距突兀；建议仅用于西文段落
多行文本垂直居中必须靠容器高度 + flex/grid，不能只靠 vertical-align
vertical-align 在 <td> 或 inline-block 元素里能用，但在普通 <div> 或 <p> 上直接写是无效的——它不作用于块级流中的块元素。
- 正确做法：父容器设
display: flex+align-items: center，子元素自然垂直居中（无论单行还是多行） - 若用 Grid，
place-items: center更简洁，但需确保容器有明确高度（如height: 300px或min-height: 100vh） - 老式
line-height == height技巧只适用于单行；多行时line-height只控制行间距，不是整体居中手段
表格里多行文本对齐，vertical-align 是唯一可靠选择
HTML 表格不用 Flex，align-content 完全无效，text-align 只管水平，真正控制单元格内多行文本上下位置的，只有 vertical-align。
- 给
<td>或<th>直接加style="vertical-align: middle"，多行文字就会在单元格高度内垂直居中 - 如果文字撑高了单元格，而你又希望所有行统一基线对齐，改用
vertical-align: top更可控 - 避免给
<tr>设vertical-align—— 它不生效，规范里只认单元格级设置
Canvas 多行文本对齐必须手动拆行 + textAlign/textBaseline 配合
Canvas 没有自动换行，textAlign 只决定单行在 (x, y) 处的锚点位置，不是“让多行整体居中”。要排版多行，你得自己切、自己算、自己画。
立即学习“前端免费学习笔记（深入）”；
- 先用
ctx.measureText()测每行宽度，按空格/标点拆分，避免中文断字（正则/[\u4e00-\u9fa5]/可辅助判断） - 设
ctx.textAlign = 'center'后，所有fillText(text, x, y)的x应统一为同一值（如canvas.width / 2） - 行高靠手动递增
y：基础值用ctx.font.match(/(\d+)px/)[1] * 1.3，再逐行加这个增量；textBaseline推荐保持默认'alphabetic'，否则y含义会变 - 调试时画条竖线（
moveTo(x, 0); lineTo(x, canvas.height)），一眼看出是否真对齐
实际排版时最易忽略的是：对齐目标到底是谁？是文字内容、容器盒子，还是视觉中心？ 选错作用对象，再调样式也没用。
