如何让可变宽度的绝对定位div以其中点定位到指定水平偏移量

你遇到的这个问题其实有个非常简洁的CSS解决方案，不需要提前知道元素的宽度，核心就是利用transform属性的百分比偏移特性——它的百分比是相对于元素自身尺寸计算的，刚好适配可变宽度的场景。

具体实现步骤 #

1. 先把元素的左边缘定位到目标偏移位置（也就是你要让中点对齐的那个位置，比如示例里的20%）；
2. 再通过transform: translateX(-50%)让元素向左平移自身宽度的50%，这样元素的中点就会刚好落在目标偏移位置上。

修改后的代码示例 #

CSS部分

.bar { 
  width: 80%; 
  position: absolute; 
  top: 0; 
  height: 25px; 
  border-radius: 2px; 
  border: solid 1px #F09; 
}
.value { 
  position: absolute; 
  height: 19px; 
  line-height: 18px; 
  border-radius: 2px; 
  top: 2px; 
  background-color: #0F9; 
  border: solid 1px #F90; 
  color: #000; 
  left: 20%; /* 先把左边缘定位到目标偏移 */
  transform: translateX(-50%); /* 向左平移自身宽度的50%，让中点对齐目标位置 */
}

HTML部分（无需修改）

<div class="bar">
  <div class="value">123v452</div>
</div>

为什么这个方法有效？ #

• left: 20%会把.value的左边缘对齐到.bar起始位置的20%处；
• transform: translateX(-50%)中的50%是相对于.value自身的宽度计算的，不管.value的内容变多变少，这个偏移量都会自动调整为自身宽度的一半，完美实现中点对齐目标位置的需求。

这个方法兼容性很好，支持IE9及以上的所有现代浏览器，完全不需要JS计算宽度，纯CSS就能搞定~

内容的提问来源于stack exchange，提问作者9b5b