Javascript 如何基于可变左百分比对齐文本

我有一个非常特别的两个div的排列，我想要。 基本上有一个父母和一个孩子。子div需要距离父div的左边界x%，其中x是可配置的。此外，子div中的文本是可配置的，但子div的中心必须始终距离父div的左侧x%

.parent{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
位置：相对位置；
}
.孩子{
左边距：{x%}；
}

正确答案

例如，当左侧的百分比为30%时：

左侧百分比仍为30%，但文本较小：

左百分比为0%：

左百分比为100%：

---

如果我理解正确-您只需应用：

transform:translateX（-50%）转到子级

请参阅：

关于
如果您对孩子应用
左边距：100%
整个元素将从家长中推出，因此文本将根本看不见。对不起，但我似乎不理解您的问题：我更新了笔--它怎么了？你期望什么样的行为？
<div class='parent'>
  <div class = 'child'>
      Correct Answer
   </div>
</div>