將原點移動到元素的中心？

背景：在我的項目中，我將小方塊（.node）分散到「地圖」上。將原點移動到元素的中心？

.node{ 
    position: absolute; 
    width: A; 
    height: A; 
    left: X %; 
    top: Y %; 
    margin-left: -(A/2); 
    margin-top: -(A/2); 
}

正如你所看到的，我必須使用margin來移動「節點」，以便它能夠集中在我的座標上。

問題：在CSS中將原點移動到元素的中心有沒有辦法讓我不必使用margin？我相信「變形起源」只適用於旋轉。

來源

2014-02-25 Magnus

您是否考慮過'width：0;高度：0;溢出：visible'？ –

我會研究那個烏爾裏希，謝謝你的提示。 – Magnus

爲什麼不使用利潤率，這就是他們的目的？ – Nit

你可以使用一個負translateX/Y

.node{ 
    position: absolute; 
    width: ...; 
    height: ...; 
    left: 50%; 
    top: 50%; 

    -webkit-transform: translate3d(-50%, -50%, 0); 
    -moz-transform: translate3d(-50%, -50%, 0); 
    transform: translate3d(-50%, -50%, 0); 
}

因爲transform-origin默認情況下(0, 0)，這個翻譯將其規模-50%移動元素（沿x和y軸）。

Codepen上的示例：http://codepen.io/anon/pen/Hkglh

來源

2014-02-25 10:30:32 fcalderan

將原點移動到元素的中心？

回答

相關問題