left/margin-left百分比不生效，如何实现嵌套div左移50%？

看起来你在尝试用相对定位的百分比偏移实现居中时踩了个常见的CSS定位坑——咱们一步步拆解问题、解决它：

首先先理清你之前方法无效的核心原因：

• position: relative 搭配 left: -50% 时，这个百分比是基于元素自身的宽度，不是父容器的宽度。比如你的.currentText宽度是80px，left: -50%只会让它往左移40px，根本没法让它在父容器里居中，这就是为啥这个设置没效果，但固定像素的left:20px能看到位移的原因。
• 用float来做居中本身就不适合，float是用来实现文字环绕或简单流式布局的，它会让元素脱离正常文档流，破坏布局是必然的结果。

接下来给你几个靠谱的解决方案，根据你的实际需求选择：

方案1：让文本在.currentText内部水平居中 #

如果只是想让.currentText里的文字自身居中，直接用文本对齐属性就行，最简单直接：

.currentText {
  text-align: center;
}

如果是React内联样式的话，写成：

<div className="currentText" style={{ textAlign: 'center' }}>
  你的文本内容
</div>

方案2：让.currentText容器在父Div里水平居中 #

如果你是想让整个.currentText块在父容器里居中，推荐用Flex布局（现在最通用、兼容性最好的居中方案）：
给父容器添加样式：

.parent-div {
  display: flex;
  justify-content: center;
}

这样不管.currentText的宽度是多少，都会自动在父容器里水平居中，完全不用依赖定位或者浮动。

如果不想用Flex，也可以用传统的margin: 0 auto方案，但需要给.currentText设置明确宽度（或者用width: fit-content自适应内容宽度）：

.currentText {
  display: block;
  width: fit-content; /* 或者固定宽度比如200px */
  margin: 0 auto;
}

这几个方案都不会破坏布局，而且能稳定实现居中效果，你可以根据自己的布局结构选最合适的~

内容的提问来源于stack exchange，提问作者Tee F