text-align不影响absolute元素的对齐，因absolute脱离文档流，需用left/top配合transform实现居中，两者可共存但作用不同。
绝对定位（position: absolute）和文本对齐（text-align）是CSS中常用的布局手段，但它们的作用机制不同，直接结合使用时容易产生误解。理解它们的原理后，可以更有效地配合实现所需布局效果。
text-align 不影响 absolute 元素的水平对齐
text-align 是作用于**块级容器内的行内内容或行内元素**的水平对齐方式，比如文本、图片、inline-block 元素等。而 position: absolute 会将元素从文档流中移出，不再受父容器 text-align 的影响。
因此，即使父元素设置了 text-align: center，其内部的 absolute 定位子元素也不会居中对齐。
让 absolute 元素实现类似 text-align 的居中效果
要使绝对定位元素居中，需要使用其他方法模拟 text-align: center 的效果：
立即学习“前端免费学习笔记（深入）”；
- 水平居中：使用 left: 50% 配合 transform: translateX(-50%)
- 垂直居中：使用 top: 50% 配合 transform: translateY(-50%)
- 完全居中：同时设置 top 和 left 为 50%，再用 transform 负偏移自身宽高的一半
示例代码：
.parent {
position: relative;
text-align: center; /* 对 absolute 子元素无效 */
}
<p>.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/<em> 实现完全居中 </em>/
}</p>何时可以结合使用 text-align 与 absolute
虽然 text-align 不能控制 absolute 元素的位置，但在以下场景中仍可配合使用：
- 父容器使用 text-align: center 居中普通文本或 inline-block 元素
- absolute 元素用于装饰性定位，不影响主内容流
- absolute 元素内部仍有文本，可用 text-align 控制其自身内容对齐
例如，一个居中的文字标题，上方叠加一个绝对定位的图标：
.container {
text-align: center;
position: relative;
}
<p>.icon {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -10px;
}</p>基本上就这些。关键是要明白 text-align 不作用于脱离文档流的元素，absolute 定位需通过 偏移 + transform 等方式手动实现居中。两者虽不能直接联动，但可在同一布局中各司其职。
