vertical-align: top 对缩放后的图像无效，因为 transform 默认以元素中心为基准点；需配合 transform-origin: top 才能实现顶部对齐。
`vertical-align: top` 对缩放后的图像无效，因为 `transform` 默认以元素中心为基准点；需配合 `transform-origin: top` 才能实现顶部对齐。
在 CSS 布局中，vertical-align 仅对行内级元素（如 inline, inline-block）在行框（line box）内的垂直对齐生效，它并不影响元素在父容器（如 Grid 或 Flex 容器）中的整体定位。你当前使用的是 display: grid 布局（.login-page），此时子元素（.phone 和 .login）是网格项（grid items），它们的对齐行为由 Grid 的 align-items、justify-items 或显式 align-self/justify-self 控制，而非 vertical-align —— 后者在此上下文中完全被忽略。
真正导致图像“看似居中”的原因，是 transform: scale(0.65) 的默认变换原点（transform-origin）为 50% 50%（即元素中心）。当图像被缩小后，其视觉中心仍与原始尺寸的中心重合，因此在网格轨道中自然呈现为垂直居中效果（Grid 默认 align-items: stretch，但图片有固有宽高，实际表现为 align-items: center 行为）。
✅ 正确解法：显式设置 transform-origin: top（等价于 top center），使缩放以图像顶部中点为基准，从而保留顶部对齐的视觉意图：
.login-page {
display: grid;
grid-template-columns: 1fr 1fr;
/* 可选：强制网格项顶部对齐 */
align-items: start; /* 关键：让所有网格项从顶部开始排列 */
}
.phone {
display: inline-block; /* 保持行内特性（非必需，但兼容旧逻辑） */
transform: scale(0.65);
transform-origin: top; /* ✅ 缩放锚点设为顶部 */
}
.ig-logo {
display: inline-block;
transform: scale(0.35);
transform-origin: top; /* 同样适用于 logo */
}
⚠️ 注意事项：
- transform-origin 必须与 transform 配合使用才有效，单独设置无意义；
- 若希望整个网格区域严格顶部对齐，推荐直接使用 align-items: start（更语义化、更可靠），而非依赖 vertical-align；
- vertical-align 在 Grid/Flex 布局中已失效，应避免在现代布局中混用；
- transform-origin 支持多种值：top、bottom、left、right、center，或具体长度如 0 0（左上角）。
总结：解决此类问题的核心在于理解 CSS 布局上下文与变换机制的协同关系——优先使用 Grid/Flex 原生对齐属性（如 align-items），再辅以 transform-origin 精确控制缩放基准点，才能实现稳定、可预测的顶部对齐效果。
