利用transform实现垂直对齐最常用方式是结合绝对定位，通过top:50%和left:50%将元素移至父容器中心，再使用translate(-50%,-50%)使其自身中心与父容器重合，从而实现居中效果。
使用 transform 实现垂直对齐，通常结合 position: absolute 或 flexbox 中的子元素来完成。最常见的方式是利用 translate(-50%, -50%) 配合绝对定位，将元素自身中心点移动到父容器的中心位置。
1. 使用绝对定位 + transform 垂直居中
适用于已知或未知尺寸的元素，通过将其定位在父容器的 50% 位置，再用 transform 反向移动自身宽高的一半来实现居中。
.parent {
position: relative;
height: 300px; /* 父容器有高度 */
}
<p>.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}</p>说明：
-
top: 50%和left: 50%把元素左上角移到父容器中心 -
transform: translate(-50%, -50%)将元素向左向上各移动自己宽高的 50%，实现真正居中
2. 在 Flex 容器中对单个子元素使用 transform
虽然 Flex 本身支持对齐（如 align-items、justify-content），但有时需要额外微调，也可结合 transform。
立即学习“前端免费学习笔记（深入）”；
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 —— 这已经够了 */
height: 300px;
}
<p>/<em> 如果要额外偏移矫正 </em>/
.flex-child {
transform: translateY(-10px); /<em> 微调垂直位置 </em>/
}</p>注意：一般不需要在 Flex 中使用 transform 居中，除非需要视觉矫正或动画效果。
3. transform 垂直居中的优势与注意事项
- 不依赖元素尺寸，适合动态内容
- 兼容性较好（IE9+）
- 不会影响文档流，适合模态框、提示框等绝对定位场景
- 避免使用在频繁重排的动画中，可能影响性能
基本上就这些。核心就是 top: 50% + transform: translateY(-50%) 实现垂直居中，加 left: 50% + translateX(-50%) 实现完全居中。简单有效，广泛使用。
