如何实现屏幕右侧固定90°旋转且垂直居中的吸附式按钮

修复方案 #

你遇到的垂直居中问题主要是旋转轴心设置错误、缺少元素自身偏移修正，以及定位类型不符合「固定在屏幕」的需求，修改后代码如下：

完整HTML代码 #

<button type="button" class="button">
    <span class="button__text">Interaction Designer <br> @ Company</span>
    <span class="button__icon"></span>
</button>

完整CSS代码 #

.button {
    position: fixed;
    display: flex;
    align-items: center; 
    justify-content: center;
    z-index: 999;
    top: 50%;
    right: 0;
    transform-origin: right center;
    -webkit-transform: rotate(-90deg) translateY(50%);
    -moz-transform: rotate(-90deg) translateY(50%);
    -o-transform: rotate(-90deg) translateY(50%);
    -ms-transform: rotate(-90deg) translateY(50%);
    transform: rotate(-90deg) translateY(50%);
    /* 可根据需求补充按钮的宽高、内边距、背景色、边框等自定义样式 */
}

关键修改说明 #

• 把position: absolute替换为position: fixed，实现相对于屏幕视口固定，不会随页面滚动改变位置
• 将transform-origin设置为right center，以按钮右侧的中点作为旋转轴心，避免旋转后出现额外的水平/垂直偏移
• 在transform属性中补充translateY(50%)，配合top: 50%抵消元素自身高度带来的偏移，实现真正的垂直居中
• 补充了CSS规则缺失的闭合大括号

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