旧版webkit需用display: -webkit-box配合-webkit-box-pack和-webkit-box-align实现居中，二者必须同时设置且声明在flex之前，取值仅支持start/end/center/justify，无space-between等现代值。

旧版WebKit用-webkit-box实现居中必须写两套声明

现代display: flex在旧版Safari（≤6.1）、Android 4.3及更早Chrome中根本不可用，必须降级到display: -webkit-box。但光写这一句没用——它只启动弹性模型，不自动居中。你得手动配-webkit-box-pack和-webkit-box-align，且这两个属性必须同时存在才生效。

常见错误是只写-webkit-box-pack: center以为就能水平居中，结果发现子元素还是贴左。因为-webkit-box-pack只管主轴（默认水平），而垂直方向完全没控制；同理，只写-webkit-box-align也只会让元素上下对齐，左右仍按文档流排。

• display: -webkit-box必须加在父容器上，子元素不能加
• 主轴方向默认是horizontal，若要垂直居中需先设-webkit-box-orient: vertical
• 如果父容器没设固定高度，-webkit-box-align: center可能失效（子元素会撑高容器而非居中）

-webkit-box-pack和-webkit-box-align的取值不是完全对应现代flex

旧版box模型的对齐逻辑更原始：它把父容器当成一个“盒子”，-webkit-box-pack决定子元素在主轴上的分布方式，-webkit-box-align决定在交叉轴上的对齐基准线。注意它们的值命名和现代flex不同：

• -webkit-box-pack: center ≈ justify-content: center（主轴居中）
• -webkit-box-align: center ≈ align-items: center（交叉轴居中）
• 没有space-between或stretch这种高级值，只有start/end/center/justify
• justify在-webkit-box-pack里是“两端对齐”，但在-webkit-box-align里无效（会被忽略）

兼容现代浏览器时，display声明顺序不能乱

为兼顾新旧浏览器，必须把-webkit-box写在flex前面，否则旧版WebKit会直接忽略后面的display: flex并导致整个布局崩掉。CSS解析是顺序覆盖的，浏览器遇到不认识的值就跳过，所以正确顺序是：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

display: -webkit-box;
display: flex;

同样，对齐属性也要按前缀优先原则排列：

-webkit-box-pack: center;
-webkit-box-align: center;
justify-content: center;
align-items: center;

漏掉-webkit-前缀，在iOS 6 Safari里就是白屏；多写了但顺序反了，新浏览器会用错值。

真正麻烦的是那些需要同时支持IE10（display: -ms-flexbox）和老iOS的项目——这时你得塞三套声明，而且-ms-的flex-align和-webkit-的box-align行为还不完全一致。实际项目里，能砍掉iOS 6支持就别硬扛。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！