如何使用HTML标签完成页面内容对齐设置-html教程-PHP中文网

HTML5中align属性已废弃，必须用CSS实现对齐：text-align控制块内行内内容水平对齐；margin:0 auto使定宽块级元素自身水平居中；flexbox支持水平垂直居中；vertical-align和writing-mode适用于特殊场景。

如何使用html标签完成页面内容对齐设置

align

属性在 HTML5 中已废弃，**不能用它实现可靠对齐**。所有现代项目必须改用 CSS，否则会出现兼容性断裂、无障碍失效、W3C 验证失败等问题。

text-align 控制文本和行内元素水平对齐

这是最常用也最容易误用的对齐方式。它只作用于块级容器（如

、

、）内部的行内内容，不移动块本身。
给父容器加 text-align: center，能让里面的文字、、（默认行内）水平居中
常见错误：给要居中的  自己加 text-align: center —— 这只会让它内部的文字居中，盒子位置不变
表格单元格统一居中：td, th { text-align: center; }；整列控制可用  + 类选择器

注意父容器宽度：如果父  没撑开（比如浮动塌陷或未设宽），text-align 看不出效果
margin: 0 auto 实现块级元素自身水平居中
这是让一个 
、 或  在页面里水平居中的经典方法，但有硬性前提。
必须显式设置宽度：width: 600px、width: 80% 或 max-width: 768px

写法是 margin: 0 auto（上下边距为 0，左右自动），不是 margin: auto

不能和 float、position: absolute 共存；若父容器用了 float，需先清除浮动或触发 BFC
表格居中也适用：
flexbox 实现真正可控的水平+垂直居中
当需要同时控制水平和垂直方向，或者子元素尺寸不确定时，display: flex 是目前最稳妥的方案。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										

父容器设 display: flex; justify-content: center; align-items: center;

父容器必须有高度才能让 align-items: center 生效，例如 min-height: 100vh 或固定 height: 400px

子元素无需定宽高，无论它是  还是  都能居中
IE10/11 存在部分 bug（如 flex: 1 行为异常），如需支持，建议加 align-items: flex-start 显式重置交叉轴

避免用 flex 父容器包裹 




 —— 会破坏 colspan/rowspan 渲染，打印和屏幕阅读器可能出错
vertical-align 和 writing-mode 处理特殊对齐场景
vertical-align 不是给父容器用的，writing-mode 也不只是“竖排文字”玩具。


vertical-align: middle 只对 display: inline、inline-block、table-cell 元素生效，常用于图文混排：img { vertical-align: middle; }

表格单元格内垂直居中必须写在  或  或  上，不能写在 

writing-mode: vertical-lr 改变文本流后，text-align: center 就变成控制“垂直方向”的居中，适合东亚竖排设计
不要把 writing-mode 当成通用垂直居中方案——它改变的是整个块的布局流向，副作用明显


真正难的不是“怎么写”，而是判断「对齐对象是谁」：你要居中的到底是文字？图片？整个 div？还是表格？选错方案会导致样式看似有效实则脆弱，尤其在 iOS 旧版 Safari、微信内置浏览器或企业内网设备上容易突然失效。