垂直對齊旋轉的固定元件？

我正在使用position屬性來定位一個觸發左側菜單的按鈕，我也希望它位於y軸上的頁面中心，問題在於元素旋轉了-90deg並且在那裏現在是左側的空白。我不想把它定位髒左：-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，我覺得它更容易在環境中理解。

來源

2017-07-04 LUEH

如果您不提供編譯的CSS，那麼大多數不使用SCSS的人將無法爲您提供幫助。 – Rob

好吧，對不起，認爲大多數人都理解今天的SASS或SCSS。我將更改代碼片段。 – LUEH

我已經調整了我的答案，以更好地解釋這裏發生的事情 - 看看，讓我知道如果有幫助？ – Frits

解決問題的最簡單方法是調整菜單按鈕的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，所以如果您的元素寬度爲150px，則它的中心距離屏幕左側75px。

旋轉元素後，即使您的「新寬度」是您的菜單按鈕的高度（在本例中爲100px，中心距爲50px），中心距屏幕仍爲75px，你的元素和屏幕邊之間有25px的空間。

來源

2017-07-04 13:24:01 Frits

垂直對齊旋轉的固定元件？

回答

相關問題