最常用方法是给块级父容器（如<div>或<p>）设置text-align: center，它仅使内部文字、<span>、图片等行内内容水平居中，不影响容器自身位置；若失效，需检查父容器是否为块级、是否被flex/grid覆盖、或子元素是否脱离文本流。
直接给父容器加 text-align: center 就行
想让某一段文字居中，最常用也最直接的办法就是把它包在一个块级容器（比如 <div> 或 <p>）里，然后给这个容器设置 text-align: center。它只影响容器内部的行内内容——文字、<span>、图片等，不改变容器自身位置。
常见错误现象：加了 text-align: center 但文字没动，大概率是父容器太窄（比如没设宽度又没撑满）、或者文字被嵌套在 <span> 里而外层容器没继承样式；用开发者工具检查 computed 样式，确认 text-align 是否生效、是否被更高优先级规则覆盖。
- 推荐写法：
<div style="text-align: center;"><p>这段文字会居中</p></div> - 如果用
<p>自身居中，直接给它加：<p style="text-align: center;">文字居中</p> - 别在
<span>上设text-align——它是行内元素，不接受该属性
text-align 失效时先查这三件事
不是所有“看起来像段落”的结构都响应 text-align。它只对块级容器内的行内内容起作用，一旦上下文不对，就会静默失效。
- 父元素 display 不是 block 或 inline-block？比如是
flex或grid容器——此时text-align不控制子项水平位置，得用justify-content - 文字被包裹在
<span>里，而外层没有块级父容器？<span style="text-align: center">不会生效</span> - 父容器宽度极小（比如只够显示几个字），文字换行后视觉上“偏左”，其实已居中——临时加
border: 1px solid red看真实范围
单行固定高容器，用 line-height 配合居中
当你要居中的是一行文字，且容器高度明确（比如按钮、导航项），text-align: center + line-height 是轻量可靠的组合。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 设
line-height等于容器height，例如：height: 48px; line-height: 48px; - 注意：
line-height是基于字体大小计算的，如果父元素字体动态变化，这个值可能失准 - 多行或高度不固定时别用——文字会重叠、截断，或垂直方向完全错位
要同时水平+垂直居中，别只靠 text-align
text-align: center 只管水平方向。如果容器有明确高度，又希望文字在正中间（比如卡片标题、弹窗提示），必须引入垂直方向的控制逻辑。
- 现代项目首选
display: flex：style="display: flex; justify-content: center; align-items: center; height: 100px;" - 兼容老浏览器可用绝对定位：
position: relative（父）+position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 千万别指望
text-align拉动垂直位置——它根本不管这事
真正容易被忽略的，是你到底想居中“文字在容器里”，还是“这个容器在页面上”。前者用 text-align，后者得换思路。混淆这两者，是所有居中失败的起点。
