在 Block、绝对定位与表格中
Flex 与 Grid 把 Box Alignment 用得最充分,而块级、绝对定位、表格这三种老布局对它的支持是逐步补上的,各有边界。本页梳理三件事:块容器落了哪几个属性、绝对定位盒子的对齐容器是什么、表格单元为何仍停在旧机制。
1 · block 容器上的对齐属性
一个定高的 display: block 容器,几个块级子元素高度之和小于容器时,块轴上有剩余空间。过去这段空间只能空在底部或手动用 margin 调,现在 align-content 能直接把这组子元素沿块轴整体摆放,无需改成 flex 或 grid。
align-content 对块级子元素的整体摆放。页顶横幅给出当前浏览器的实测结论,不支持时子元素将始终贴顶。
警示 · 块容器上六个属性并非全部生效,实测 Chrome 151 的结果是三生三不生(核对于 2026-08)。生效的是块轴的 align-content,以及行内轴的 justify-items 与 justify-self:在 200px 宽的块容器里给 60px 宽的子元素写 justify-items: center 或
justify-self: center,量得左偏移 70px,即已居中。不生效的是 justify-content,以及对 in-flow 块级子元素的 align-items 与 align-self,量得的偏移均为 0,因为块级子元素在块轴上本就依次堆叠、彼此独立,没有「一个格子」可供单项在块轴上移动。
这一条修正了一个常见说法。行内轴上让单个块级盒子移动,过去只有 margin-inline: auto 一条路,现在 justify-self 同样可用,且不必是绝对定位盒子。
2 · 绝对定位的 inset 区域
一个绝对定位盒子,其对齐容器是由 inset(即 top、right、bottom、left)圈出的矩形。当盒子有固定尺寸、在该区域里有富余时,justify-self 与 align-self 就能把它摆到某一侧或居中。
inset: 0 圈出的对齐容器内,绝对定位盒子在各 place-self 取值下的落点。
实测同样成立:position: relative 的 200×120 容器内,inset: 0 的 60×30 盒子写 place-self: center,量得左偏移 70、上偏移 45,正是两轴居中;不写对齐属性时 normal 对非替换元素表现为 stretch,盒子被撑满整个 200×120(Chrome 151,核对于 2026-08)。
经典的绝对定位居中要写 left: 0; right: 0; top: 0; bottom: 0; margin: auto,靠四方 auto margin 吸收剩余空间。有了对齐属性,等价写法是 inset: 0; place-self: center,意图更直白。stretch 那一项则正对应「inset: 0 且不设宽高时盒子撑满」的老行为。
3 · 表格单元的旧机制
表格内部的盒子(table、tr、td)位置由表格算法决定,不接受 justify-self、align-self、justify-content 这些属性。单元格内容的对齐沿用更早的两个属性:行内方向用 text-align,块方向用 vertical-align,取
top、middle 或 bottom。
text-align 与 vertical-align 下的对齐。
建议 · 同样是块轴居中,Flex 与 Grid 写 align-items: center,表格单元写 vertical-align: middle,定高 block 容器写 align-content: center。三套语法对应三种布局模式下的同一意图,Box Alignment
的长远目标正是用一套属性收敛它们,只是表格因历史包袱仍停在旧机制。