css - left 或 margin-left 不适用于 %

Question

我在一个 div 中嵌套了一个 div。我正在尝试显示一些文本并且有效。然而，我想要的是文本居中对齐，即它有一个 left: -50%。但它什么都不做。但是当我执行类似 left: 20px 的操作时，文本会向左移动 20px。如何实现将我的 div 向左移动 50%？

即使有相对位置我也没有改变

.currentText{
  position: relative;
  margin-left: -50px;
}

使用 float 会破坏我的显示

.currentText{
  float: left;
  margin-left: -50px;
}

我的 html(在我的例子中是 jsx)是:

<div style={{ marginLeft: `${currentPer}%`, marginRight: `${100 - currentPer}%` }}>
  <div className={s.currentText}>
    {intl.formatMessage(messages.boo)}
  </div>
</div>
<div style={{ marginLeft: `${currentPer}%`, marginRight: `${100 - currentPer}%` }}>
  <div
    className={s.down}
  />
</div>

Answer 1

你想得到这样的东西吗？ :

https://jsfiddle.net/nL7bjgbx/20/

我已经使用 jQuery 获取子 div 的 witdh 并将其偏移一半的值

var widthDiv = $(".childDiv").css('width');
var rule = '-'+(widthDiv.replace("px", "")/2)+'px';

$(".childDiv").css('margin-left', rule);