如何让旋转90度的div与父元素边缘/边框盒对齐？

方法1：调整变换原点+反向边距补偿 #

默认情况下，CSS transform的transform-origin是元素中心，旋转后元素会自然偏移进父容器的内边距里。你可以把变换原点设为元素的边角，再用边距抵消父容器的内边距影响，完全不用固定像素值——用CSS变量就能适配动态内边距：

.parent {
  --container-padding: 16px; /* 统一管理父容器内边距 */
  padding: var(--container-padding);
  border: 1px solid #333;
}

.rotated-div {
  transform: rotate(90deg);
  transform-origin: top left; /* 将旋转原点设为元素左上角 */
  margin-left: var(--container-padding);
  margin-top: var(--container-padding);
}

如果父容器的内边距是动态变化的，只要更新--container-padding变量即可，无需修改旋转元素的样式。

方法2：CSS Grid 精准定位 #

用Grid布局可以在保持元素文档流位置的前提下，精准控制旋转元素的对齐：

.parent {
  --container-padding: 16px;
  display: grid;
  padding: var(--container-padding);
  border: 1px solid #333;
}

.rotated-div {
  transform: rotate(90deg);
  transform-origin: top left;
  justify-self: start;
  align-self: start;
  /* 反向偏移父容器内边距，实现边框对齐 */
  margin-left: calc(var(--container-padding) * -1);
  margin-top: calc(var(--container-padding) * -1);
}

这种方式不会脱离文档流，完全符合你的布局规划要求。

方法3：用writing-mode替代旋转（纯文本场景） #

如果你的需求只是让文本竖排，没必要用rotate——用writing-mode可以让元素自然贴合父容器边框，彻底避免偏移问题：

.rotated-div {
  writing-mode: vertical-rl; /* 从右到左竖排 */
  /* 可选：控制文本方向 */
  text-orientation: mixed;
}

这个方法无需处理任何偏移，适合纯文本的竖排需求。

关于CSS特性的说明 #

目前CSS变换模块的设计中，transform是基于元素自身盒模型的视觉调整，不会自动感知父容器的内边距并自适应偏移——这是特性而非局限，因为变换不改变元素在文档流中的占位。但通过上面几种方法，完全可以在不使用position:absolute的前提下实现对齐。

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