如何在CSS Grid单元格中垂直偏移元素？以中心数字5为例

完全可以做到，给你两种简单且不破坏整体布局的方案：

方案一：使用 transform: translateY() #

这是最推荐的方法，不会影响其他元素的布局，只改变目标内容的位置：

.item5 {
  transform: translateY(15px);
}

说明：translateY(15px) 会让数字5沿着垂直方向向下移动15像素，若要向上偏移，把数值改成负数即可（比如 translateY(-15px)）。

方案二：使用相对定位 position: relative #

通过相对定位实现偏移，同样不会干扰整体网格布局：

.item5 {
  position: relative;
  top: 15px;
}

说明：top:15px 会让元素相对于自身原始位置向下移动15像素，向上偏移则设置 top: -15px。

如果你的中心单元格有默认的内边距或对齐样式，也可以通过调整 padding-top 或 margin-top 实现偏移，但这种方式可能会改变单元格的实际尺寸，所以优先考虑上面两种方法。

内容的提问来源于stack exchange，提问作者user20352211