HTML元素默认不对齐，需用CSS实现：text-align控制行内内容水平对齐；margin:0 auto实现块级元素水平居中（需设宽度）；vertical-align仅对表格单元格或行内元素有效；垂直居中推荐Flex、Grid或绝对定位+transform。
HTML 元素默认不居中、不右对齐、不垂直居中——这不是 bug，是标准行为。要改对齐方式，得靠 CSS，不是 HTML 属性（比如 align 已废弃且在现代浏览器中基本无效）。
用 text-align 控制行内内容水平对齐
这个属性只对块级容器里的行内内容（如文字、<img alt="HTML元素对齐方式的修改教程" >、<span></span>）起作用，不影响块级子元素本身的位置。
- 设在父元素上：
text-align: center让内部文字/图片居中；text-align: right右对齐 - 对
<div> 里的 <code><p></p>有效，但对它里面的另一个<div> 无效（除非那个子 <code>div设了display: inline-block） - 别在 flex 容器或 grid 容器上滥用——它会被忽略，优先用
justify-content - 写法示例：
div { width: 300px; margin: 0 auto; } - 如果没设
width，margin: auto不生效（因为块级元素默认占满父宽，“自动”左右外边距就是 0） - 不适用于
position: absolute元素——此时要用left: 50%+transform: translateX(-50%) - 常见误用：
div { vertical-align: middle; }—— 这行代码没有任何视觉效果 - 真正靠谱的垂直居中方案只有三个：Flex（
display: flex; align-items: center）、Grid（display: grid; align-items: center）、绝对定位 + transform - 如果父容器高度未知，又想兼容老浏览器，
display: table-cell+vertical-align: middle是唯一纯 CSS 方案，但语义失真、响应式难处理
用 margin: auto 实现块级元素水平居中
这是最常用也最可靠的居中手段，但有硬性前提：元素必须有明确宽度，且是块级（或 display: block）。
垂直居中不能只靠 vertical-align
vertical-align 只在表格单元格（display: table-cell）或行内/行内块元素（inline/inline-block）中有效，对普通块级元素完全无效。
立即学习“前端免费学习笔记（深入）”；
对齐问题看似简单，实际卡点往往出在“谁对谁对齐”没理清——是内容对容器？子元素对父元素？还是元素自身在视口中的定位？先确认作用对象和上下文流，再选对应 CSS 机制，比死记属性更省时间。
