使用text-align: center实现水平居中；2. 单行文本通过line-height与height相等垂直居中；3. 多行文本用flex布局的justify-content和align-items实现双向居中。
在html5中实现文字居中对齐，主要依赖css来控制文本的布局样式。根据不同的场景（如行内文本、块级元素、垂直居中等），有多种有效的居中方案。以下是几种常见且实用的文本居中方法。
1. 水平居中文本（text-align: center）
这是最常用的方式，适用于让块级容器内的行内内容（如文字、图片）水平居中。
使用 text-align: center 设置父元素的文本对齐方式。
示例：
<div style="text-align: center;"> 这段文字会水平居中显示 </div>
注意：这个属性只对行内内容有效，不能使块级元素自身居中。
2. 块级元素内文本居中
当文本被包裹在 p、h1-h6、span 等元素中时，只需将父容器设置 text-align: center 即可。
立即学习“前端免费学习笔记（深入）”；
例如：
<div style="width: 300px; margin: 0 auto; text-align: center; border: 1px solid #ccc;"> <h2>标题居中</h2> <p>段落文字也居中</p> </div>
外层div本身通过 margin: 0 auto 居中页面，内部文字通过 text-align: center 居中。
3. 单行文本垂直居中（line-height）
对于单行文本，比如按钮或导航栏中的文字，可通过设置 line-height 等于容器高度 实现垂直居中。
示例：
<div style="height: 40px; line-height: 40px; text-align: center; border: 1px solid #ddd;"> 居中的单行文字 </div>
line-height 和 height 相等时，文字在垂直方向上居中显示。
4. 多行文本块整体居中（flex布局）
使用 Flexbox 可轻松实现水平和垂直双向居中，适合复杂或响应式布局。
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid #aaa;"> <p>多行文本<br>也能完美居中</p> </div>
justify-content 控制水平居中，align-items 控制垂直居中。
5. 使用Grid布局居中
CSS Grid 也是一种现代布局方式，适合需要精确控制的场景。
示例：
<div style="display: grid; place-items: center; height: 200px; border: 1px solid #bbb;"> 文字内容 </div>
place-items: center 是简写，等同于同时设置水平和垂直对齐方式。
基本上就这些常用的html5文本居中方法。根据实际需求选择合适的方式：简单文本用 text-align，单行用 line-height，复杂或多行推荐 flex 或 grid。不复杂但容易忽略细节，比如容器尺寸是否明确、元素类型是否正确处理。掌握这些，就能灵活应对各种居中场景。