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

Question

堆栈：Meteor + React + MUI

这是我的 'main' 渲染器组件的完整代码：

// 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',

有了这个样式，我无法将它水平居中对齐，没有这个样式，我什至无法将它定位到我想要的位置。

我尝试过的：

保证金：0 自动 --> 失败
text-align: 中心 --> 失败
显示：flex --> 失败
1 和 2 的组合 --> 失败
left={$(window).width/2-20} --> 这可行，但我只想使用 CSS

Answer 1

以下是我如何确保它水平居中。非常适合我。

设置父组件样式为position: 'relative'。
将刷新指示器样式设置为marginLeft: '50%'，left={-20}（假设大小为40）。

这是代码（我把它放在 CardText 组件中）。

    ...
    <CardText style={{position: 'relative'}}>
      <RefreshIndicator
        size={40}
        left={-20}
        top={10}
        status={'loading'}
        style={{marginLeft: '50%'}}
      />
    </CardText>
    ...

Answer 2

下面的解决方案使进度指示器居中，没有任何导致元素偏移的骇人听闻的计算：

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

Answer 3

material ui 中的循环过程和页面 Whosebug 的文本中间

 <div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
                                <CircularProgress />
                                <span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
                            </div>[![enter image description here][1]][1]

Answer 4

在 MUI v5 中，有一个 Stack 组件用作 flexbox 容器。默认方向是 column，要水平居中，你可以设置 alignItems 到 center:

<Stack alignItems="center">
  <CircularProgress />
</Stack>

现场演示

Answer 5

Backdrop Component 会将进度指示器放在中央，还可以在您的应用程序上添加一个暗淡的图层。此组件适用于 MUI V5。

<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>

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

MUI Progress Indicator center align horizontally

css

reactjs

material-ui

现场演示