在以前版本的 CSS Flexible Box 布局规范中,绝对定位的子项的静态位置设置为就像这些子项是尺寸为 0x0 像素的弹性项一样。最新版本的规范将它们完全从流程图中移出,并根据对齐和对齐属性设置静态位置。在撰写本文时,桌面版和 Android 版 Edge 和 Opera 39 已支持此功能。
例如,我们将一些定位行为应用于以下 HTML。
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
我们添加如下内容:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
在 Chrome 52 或更高版本中,嵌套的 <div>
将完全位于容器 <div>
的中心位置。
在不合规的浏览器中,绿色框的左上角将位于红色框顶部的中心位置。