用 Flex 实现购物车商品行垂直居中：给 .cart-item 设 display: flex 和 align-items: center，确保 checkbox 和 img 为直接子元素；图片设固定 height 和 object-fit: cover；推荐用 gap 控制间距。
购物车里商品行通常包含左侧勾选框、主图、标题、价格、数量等，要让勾选框和主图在行高内垂直居中，用 Flex 是最直接、稳定的方式——不用算行高、不依赖固定尺寸、也不用 transform 或绝对定位。
给商品行容器设为 flex 容器
每条商品记录一般用 <div class="cart-item"> 包裹，这是关键一步：
- 给
.cart-item设置display: flex，它就成为弹性容器 - 默认
flex-direction: row，主轴水平，交叉轴就是垂直方向 - 此时只需一句
align-items: center，所有直接子元素（包括勾选框、图片）就在交叉轴（即垂直方向）上自动居中了
勾选框与主图结构要合理
确保 checkbox 和 img 是 .cart-item 的**直接子元素**，例如：
- ✅ 正确结构：
<div class="cart-item"><input type="checkbox"><img src="..."><div>...</div></div> - ❌ 错误结构：checkbox 套在另一个 div 里，而那个 div 才是直接子元素 →
align-items不会穿透作用到内部 checkbox
处理图片高度不一致或拉伸问题
主图尺寸可能不同，但垂直居中仍要整齐，建议：
- 给
img加height: 60px（或你设计的统一高度），并设object-fit: cover保证裁剪显示 - 避免只设
max-height，否则图片实际高度不一，align-items: center虽然生效，视觉上仍可能错位 - 勾选框默认有浏览器原生高度，若需更协调，可加
margin-top: -2px微调（非必须）
额外提示：对齐更精细时可用 gap 和 flex 项控制
如果勾选框和图片之间空隙不均匀，别用 margin，改用容器的 gap：
.cart-item { display: flex; align-items: center; gap: 12px; }- gap 会自动在相邻子项间插入等距间隙，比手动写 margin 更可靠、响应式友好
- 如需勾选框宽度固定、图片占剩余空间，可给图片加
flex: 1，但购物车中通常不需要
