css - 如何在 React 中制作一个与页面大小对齐且文本居中的圆圈？

Question

让我们从我的代码开始吧

const circle = {
    display: 'table',
    textAlign: 'center',
    height: 160,
    width: 160,
    borderRadius: 80,
    color: 'white'
};
return (
    <div className="bg-info" style={circle}>
        <div style={{display: 'table-cell', verticalAlign: 'middle'}}>
            <h2 className="text-white">{props.alarms}</h2>
            <div>Total Alarms</div>
        </div>
    </div>
);

我尝试在 StackOverflow 上四处搜索，但没有找到任何结果。这是它在页面上的显示方式 see here

不仅文本没有居中，圆圈也没有与页面大小调整对齐，因为我的高度和宽度是固定的

我该怎么做才能解决这个问题？如您所见，我使用表格的显示试图使其居中，但失败了。此外，一旦我解决了这个问题，图片中总警报上方的文本 (Total Alerts) 也会得到一个具有不同背景颜色的圆圈。

我也安装了 react-bootstrap，如果这对这有帮助的话

编辑:我删除了代码中一些不相关的数据

Answer 1

您可以使用 flexbox 来实现居中内容，并使用 vw 来调整大小:

<div class="circle">
 <div>
  <h2>Text1</h2>
  <h3>Text2</h3>
 </div>
</div>

.circle {
  background: blue;
  width: 70vw;
  height: 70vw;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.circle > div {
  text-align: center;
}

这是 fiddle 的链接 https://jsfiddle.net/7gk1tx0p/