css 父元素旋转90度内部子元素每添加一个就会向下偏移一点 怎么解决

当你遇到CSS父元素（可能是`<div>`或者其他容器）旋转90度，导致内部子元素垂直方向偏移的问题时，可以采取以下几种解决方案：

1. **使用Flexbox布局**：
如果父元素是flex容器，你可以通过设置`align-items`属性来保持子元素在水平轴上对齐。例如：

   .parent {
     transform: rotate(90deg);
     display: flex;
     flex-direction: column;
     align-items: center; /* 或者 baseline, stretch等 */
   }

2. **绝对定位**：
使用`position: absolute`结合`top`, `left`属性来定位子元素，使其相对于原方向的位置保持一致：

   .child {
     position: absolute;
     top: calc(50% - child-height / 2); /* 调整成实际高度 */
     left: calc(50% - child-width / 2); /* 调整成实际宽度 */
   }

3. **使用视口单位（vw/vh）**：
让子元素的顶部对准父元素的中心点，可以使用`vh`单位：

   .child {
     transform-50%) rotate(90deg);
     height: 50vh; /* 子元素高度的一半等于父元素高度的一半 */
   }

4. **使用CSS Grid布局**：
对于复杂的布局，Grid布局也是一种选择。将父元素转换为grid container，然后调整子格的间距和位置：

   .parent {
     transform: rotate(90deg);
     display: grid;
     place-items: center;
   }

   .child {
     grid-row: span auto; /* 自动分配行数 */
   }