最轻量单行文字居中用 text-align: center + line-height 等于容器高度；现代浏览器首选 Flex 布局（display: flex + justify-content/align-items）；兼容老版本用绝对定位+transform；注意元素 display 类型及父容器定位上下文。
用 text-align 和 line-height 快速居中单行文字
纯文本、固定高度容器里水平+垂直居中，最轻量的办法就是组合这两个 CSS 属性。前提是内容只有一行，且容器高度明确。
-
text-align: center控制水平居中，对块级元素内联内容有效 -
line-height设为和容器height相同值，靠行高“撑开”文字实现视觉垂直居中 - 如果文字换行或高度动态变化，
line-height会失效，文字可能被截断或错位 - 示例：
div { height: 40px; line-height: 40px; text-align: center; }
Flex 布局实现真正可靠的居中（现代浏览器首选）
只要目标浏览器支持 Flex（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），这是目前最干净、适应性最强的方案。
- 父容器加
display: flex，再配justify-content: center（水平）和align-items: center（垂直） - 不依赖文字行数、容器是否固定高度、字体大小是否变化——统统自动适配
- 注意：子元素默认变成 flex item，
vertical-align失效，margin: auto在主轴方向也可能被忽略 - 示例：
.container { display: flex; justify-content: center; align-items: center; height: 200px; }
绝对定位 + transform 解决老版本兼容问题
IE9–IE11 或需要支持 Safari 6 以下时，Flex 不可用，这个组合是更稳妥的替代。
- 父容器设
position: relative，子元素设position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 比传统“负 margin”写法安全——不用预先知道子元素尺寸
- 容易漏掉
position: relative在父级，导致元素相对视口定位，整个布局偏移 - 如果子元素含
display: inline内容，记得加white-space: nowrap防止换行破坏居中
文字本身不是块级元素？别忘了 display 的隐式影响
直接给 或 写 text-align 看不到效果，大概率是因为它没占据整行宽度，或者被包裹在非块级上下文中。
-
text-align只对块级容器内的**内联内容**起作用；默认是 inline，必须先设display: block或inline-block才能让它响应text-align - 用开发者工具检查 computed styles，确认元素的
display值和实际渲染盒模型是否符合预期 - 不要在
或上盲目套居中样式——它们有原生对齐逻辑，优先走text-align+padding组合更可控
文字居中看着简单，但每种方法背后都绑着特定约束条件。选错前提，比如用 line-height 对付多行文字，或者在未设 position: relative 的父容器里用 transform 定位，问题就藏在看似最顺手的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
