css - MUI 进度指示器居中水平对齐

Question

堆栈:Meteor + React + MUI

这是我的“主要”渲染器组件的完整代码:

// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS

render() {
    return ( 
      <div className = "container">
        <AppBar title = "test" />
        <Tabs /> // Tab contents goes here
        <RefreshIndicator
          left={70} // Required properties
          top={0}  // Required properties
          status="loading"
          style={{ 
              display: 'inline-block',
              position: 'relative',
              margin: '0 auto' }} />
      </div>
   );
},

我想让刷新指示器在 myTabs 下方水平居中对齐，就像这张图片中的这个旋转圆圈:

在MUI的文档中here , 该指标带有以下样式:

display: 'inline-block',
position: 'relative',

使用这种样式我无法将它水平居中对齐，如果没有这种样式，我什至无法将它定位在我想要的位置。

我尝试过的:

1. margin :0 自动 --> 失败
2. 文本对齐:居中 --> 失败
3. 显示:flex --> 失败
4. 1 和 2 的组合 --> 失败
5. left={$(window).width/2-20} --> 这可行，但我只想使用 CSS

Answer 1

下面的解决方案使进度指示器居中，没有任何导致元素偏移的复杂计算:

<div style={{display: 'flex', justifyContent: 'center'}}>
   <RefreshIndicator status="loading" />
</div>