CSS：如何从 Javascript 变量中以中间为原点设置元素的位置？答案

【问题标题】：CSS: How can I set an element's position with middle as origin, from Javascript variable?CSS：如何从 Javascript 变量中以中间为原点设置元素的位置？
【发布时间】：2017-11-28 05:31:03
【问题描述】：

我有一个标记比例的图像，其中标记的位置在 HTML 中设置为

<image class="red-marker" xlink:href="./assets/images/marker.png"
[attr.x]=percentage width="12"height="40" y="0" ></image>

但是，我希望标记的中间出现在这个位置。现在它的左侧与它对齐。见图片：

The marker's position when 'percentage' is 100%: 在 HTML、CSS 或 Javascript 中有什么方法可以解决这个问题，例如：

将图像原点设置为水平中间
在 X 位置上使用 CSS 的 calc() 以及未知的 Javascript 变量
在 Javascript 中应用位置，引用变量。

【问题讨论】：

可以将负边距设置为图像宽度的一半吗？

标签： javascript css image alignment

【解决方案1】：

（已编辑）您可以将transform: translateX(-50%) 添加到图像的 CSS 中。这会将其向左移动其自身宽度的一半。

div {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  margin-left: 200px;
}

img {
  transform: translateX(-50%);
}

&lt;div&gt;&lt;img src="http://placehold.it/100x50/fa0"&gt;&lt;/div&gt;

【讨论】：