Javascript 如何在动态更改另一个div内宽度的div上居中放置文本？

我正在React中为一个显示自动化结果的应用程序创建一个组件。我试图创建一个自定义进度条，显示通过测试的百分比。但是，当我尝试将文本居中时，它相对于内部div居中

我的进度条的代码是：

import React from 'react';
import classes from './ProgressBar.modules.scss';

const progressBar = props => {
  return (
    <div className={ classes.ProgressBar }>
      <div style={{ width: props.passed }}>
        { props.passed }
      </div>
    </div>
  );
};

---

我尝试将文本居中，但它仅相对于绿色居中。如何将其居中放置在两个div之上？

将其放置在一个单独的

span

（或

div

，

p

，无论什么）：

然后设置

span

，例如：

.ProgressBar .label {
  position: absolute; /* <<< reason for relative positioning */
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px; /* <<< adjust to your needs */
  text-align: center;
}

.ProgressBar.label{
位置：绝对；/*如果我理解正确，那么您希望在整个进度条中居中显示百分比，而不考虑百分比值

最简单的方法是在没有包含百分比文本背景的绿色div顶部放置一个全宽的空div，并将文本居中。
如果要垂直居中文本，请尝试将这些行添加到
ProgressBar div

display: flex;
flex-direction: column;
justify-content: center;

或者，如果您不想使用flexbox：

vertical-align: middle;
display: table-cell;

如果要使文本独立于其父元素居中，则不能缺少另一个元素，例如，具有绝对位置的
span
。
我想说，如果要使文本和进度div独立，更好的结构应该是将文本和进度作为兄弟元素，如：

<div class="back">
 <div class="front"></div>
 <p>70%</p>
</div>

并使进度条处于绝对位置，以便“让开”

当然，由于标签是静态的，它会隐藏在已定位的进度条下。然后你也必须定位他

.back > p {
    position: relative;
}

我不是说这是最好的方法，但我认为这值得一提，因为它重新排列了组件层次结构，我认为您应该这样做，并且它使用flexbox将文本居中


.back{
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：300px；
高度：60px；
背景：紫色；
边界半径：8px；
溢出：隐藏；
}
.前线{
位置：绝对位置；
排名：0；
左：0；
宽度：70%；
身高：100%；
背景：橙色；
}
p{
位置：相对位置；
}

70%

css问题的沙盒？
vertical-align: middle;
display: table-cell;

<div class="back">
 <div class="front"></div>
 <p>70%</p>
</div>

.back {
  display: flex;
  align-items: center;
  justify-content: center;  
}

.back {
    position: relative;
}

.front {
    position: absolute;
    top: 0;
    left: 0;
}

.back > p {
    position: relative;
}