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