如何旋转div元素并保持侧边导航链接的居中对齐

核心问题根源 #

你遇到的居中偏移不是样式逻辑错了，是两个基础CSS规则和预期不匹配导致的：

• CSS的transform: rotate() 只会改变元素的视觉渲染朝向，不会修改元素本身在文档流中占据的原始宽高尺寸
• 你给.social-links-container 设置的初始尺寸是匹配侧边面板的：宽度撑满窄侧边栏、高度占面板80%的长空间。把这个容器转-90度之后，它视觉上的可用空间就变成了“短高度、长宽度”，和侧边面板的竖向空间完全不匹配，自然无法靠原来的flex规则居中。

方法一：调整旋转容器的定位与尺寸（保留手动旋转效果） #

按照以下步骤调整即可实现居中：

• 给.social-links-container 去掉原来的满幅宽高设置，改成匹配旋转后的视觉尺寸：高度和侧边面板的实际宽度一致，宽度和面板内社交区的实际可用高度一致
• 给容器加绝对定位，把旋转元素的中心锁在社交区的几何中心位置
• 配合平移修正旋转带来的坐标偏移

参考的完整样式：

.social-links-container {
    /* 替换原来的宽高设置 */
    height: 60px; /* 替换为你侧边面板的实际宽度值 */
    width: calc(100vh * 0.8); /* 匹配社交区占面板80%高度的可用长度，按实际面板高度调整即可 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 绝对定位锁位置 */
    position: absolute;
    top: 50%; /* 落在面板的垂直中心位置，匹配菜单图标下方的80%社交区范围 */
    left: 50%;

    /* 旋转与居中修正 */
    transform: rotate(-90deg) translate(-50%, -50%);
    transform-origin: center center;
}

注意：如果侧边面板没有设置相对定位，记得给最外层的面板容器加 position: relative，保证上面的绝对定位是相对于面板本身计算的。

方法二：更稳定的无旋转方案（推荐） #

完全不需要用transform: rotate() 手动旋转容器，直接用CSS的writing-mode属性实现竖向文字排布，不会出现旋转带来的尺寸错位问题：

.social-links-container {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* 可替代原来.dot-icon-container的内外边距，统一管理元素间距 */

    /* 直接实现竖向侧向排布 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

这个方案下元素完全保留原本的文档流位置，flex的居中规则直接生效，不需要计算旋转后的偏移量，兼容性覆盖所有现代浏览器。

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