最常用且实用的两种CSS文字水平居中方法是text-align: center和flexbox布局。前者适用于块级容器内行内元素的居中，只需设置父容器text-align: center即可实现文字、图片等内容的水平居中；后者通过display: flex、justify-content: center和align-items: center可实现子元素（包括块级元素）真正的水平垂直居中，灵活性更强，适用复杂布局场景。
让文字在容器中水平居中，最常用且实用的两种 CSS 方法是：text-align: center 和 flexbox 布局。它们适用场景不同，选对方法才能事半功倍。
用 text-align: center 实现行内内容居中
这是最简单直接的方式，适用于块级容器（如 div、p、header）内部的纯文字、图片、按钮等行内级元素。
- 只需给父容器设置 text-align: center，子元素中的文字就会水平居中
- 注意：它只影响行内内容的**行内对齐**，不影响块级子元素自身的宽度或位置
- 例如：div { text-align: center; } —— 里面的所有 span、img、a 标签都会居中显示
用 flexbox 实现真正意义上的居中（含垂直）
当需要同时水平+垂直居中，或者要精确控制子元素（尤其是块级元素）的位置时，flexbox 更可靠。
- 给父容器设置 display: flex; justify-content: center; align-items: center;
- justify-content 控制主轴（默认为水平）对齐，center 即居中
- align-items 控制交叉轴（默认为垂直）对齐，center 同样实现垂直居中
- 即使子元素是 div、卡片、图标等块级元素，也能精准居中
基本上就这些。text-align 简单够用，flexbox 更灵活强大——根据你的布局需求选一个就行。
立即学习“前端免费学习笔记（深入）”；
