Question

背景：在我的项目中，我将小方块div（.node）分散到“地图”上。

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

正如你所看到的，我必须使用margin来移动“节点”，使它在我的坐标上居中。

问题：在css中有没有办法将原点移动到元素的中心，所以我不必使用保证金？我认为“变换起源”只适用于轮换。

Answer 1

您可以使用否定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

将原点移动到元素的中心？

1 个答案: