将原点移动到元素中心？答案

【问题标题】：Move origin to center of element?将原点移动到元素中心？
【发布时间】：2014-02-25 10:26:41
【问题描述】：

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

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

如您所见，我必须使用边距来移动“节点”，使其以我的坐标为中心。

问题： css中有没有办法将原点移动到元素的中心，这样我就不必使用边距了？我相信“transform-origin”只适用于轮换。

【问题讨论】：

你考虑过width:0; height:0; overflow:visible吗？
我会调查那个 Ulrich，谢谢你的提示。
为什么不使用边距，这就是它们的意义所在？
兄弟你试过给变换：旋转（0度）；然后给 transform-origin 猜测它会有所帮助....
@Magnus 如果它对你有用，你应该接受一个答案

标签： html css transform

【解决方案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

【讨论】：