CSS 与布局 / CSS Box Alignment · 一套对齐属性横跨所有布局 / 在 Block、绝对定位与表格中 待审核 3 / 6
in block / abspos / table

在 Block、绝对定位与表格中

Flex 与 Grid 把 Box Alignment 用得最充分,而块级、绝对定位、表格这三种老布局对它的支持是逐步补上的,各有边界。本页梳理三件事:块容器落了哪几个属性、绝对定位盒子的对齐容器是什么、表格单元为何仍停在旧机制。

1 · block 容器上的对齐属性

一个定高的 display: block 容器,几个块级子元素高度之和小于容器时,块轴上有剩余空间。过去这段空间只能空在底部或手动用 margin 调,现在 align-content 能直接把这组子元素沿块轴整体摆放,无需改成 flex 或 grid。

图 1-1 · 定高 block 容器上 align-content 对块级子元素的整体摆放。页顶横幅给出当前浏览器的实测结论,不支持时子元素将始终贴顶。

警示 · 块容器上六个属性并非全部生效,实测 Chrome 151 的结果是三生三不生(核对于 2026-08)。生效的是块轴的 align-content,以及行内轴的 justify-itemsjustify-self:在 200px 宽的块容器里给 60px 宽的子元素写 justify-items: centerjustify-self: center,量得左偏移 70px,即已居中。不生效的是 justify-content,以及对 in-flow 块级子元素的 align-itemsalign-self,量得的偏移均为 0,因为块级子元素在块轴上本就依次堆叠、彼此独立,没有「一个格子」可供单项在块轴上移动。

这一条修正了一个常见说法。行内轴上让单个块级盒子移动,过去只有 margin-inline: auto 一条路,现在 justify-self 同样可用,且不必是绝对定位盒子。

2 · 绝对定位的 inset 区域

一个绝对定位盒子,其对齐容器是由 inset(即 toprightbottomleft)圈出的矩形。当盒子有固定尺寸、在该区域里有富余时,justify-selfalign-self 就能把它摆到某一侧或居中。

图 2-1 · 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 · 表格单元的旧机制

表格内部的盒子(tabletrtd)位置由表格算法决定,不接受 justify-selfalign-selfjustify-content 这些属性。单元格内容的对齐沿用更早的两个属性:行内方向用 text-align,块方向用 vertical-align,取 topmiddlebottom

图 3-1 · 表格单元内容在 text-alignvertical-align 下的对齐。

建议 · 同样是块轴居中,Flex 与 Grid 写 align-items: center,表格单元写 vertical-align: middle,定高 block 容器写 align-content: center。三套语法对应三种布局模式下的同一意图,Box Alignment 的长远目标正是用一套属性收敛它们,只是表格因历史包袱仍停在旧机制。