垂直对齐旋转的固定元素？答案

【问题标题】：Vertically align fixed element which is rotated?垂直对齐旋转的固定元素？
【发布时间】：2017-07-05 07:41:46
【问题描述】：

我正在使用位置属性来定位一个触发左侧菜单的按钮，我还希望它在 y 轴上的页面中心，问题是元素旋转了 -90 度并且现在左边有一个空格。我不想把它放在脏左边：-24px;或者其他的东西。有人知道为什么会有空格，如果是，我该如何防止这种情况发生并解决我的问题？

这是我的代码，您也可以在我制作的 codepen 中找到它：

<div class="content-wrapper bg--secondary">
    <div class="menu__button">
        <span class="menu__button__link">
            menu
        </span>
    </div>  
</div>


// CSS starts here

.content-wrapper{
    width: 100%;
    height: 100vh;
}

.menu__button{
    width: 150px;
    height: 100px;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%) rotate(-90deg);
}

.bg--primary{
    background-color: #2d2d2d;
}

点击here访问codepen，我觉得在环境中比较容易理解。

【问题讨论】：

如果您不提供编译后的 CSS，我们大多数不使用 SCSS 的人将无法为您提供帮助。
好吧，很抱歉，以为今天大多数人都理解 SASS 或 SCSS。我将更改代码sn-p。
我已经调整了我的答案，以便更好地解释这里发生的事情 - 看看，让我知道这是否有帮助？

标签： html css css-position css-transforms

【解决方案1】：

解决问题的最简单方法是调整菜单按钮的transform-origin。

.menu-button {
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: 100px 25px; //the height of the element and the height - the center position (explanation below);
}

我已在您的 codepen as an example 中对其进行了调整。

进一步解释为什么您的菜单会发生这种情况，您的 transform-origin 始终为 center center，因此如果您的元素为 150 像素宽，则其中心距屏幕左侧 75 像素。

旋转元素后，中心距离屏幕仍有 75 像素，即使您的“新宽度”是菜单按钮的高度，在本例中为 100 像素，中心为 50 像素，剩下 25 像素元素与屏幕侧面之间的空间。

【讨论】：