MUI Progress Indicator center align horizontally

Question

Stack: Meteor + React + MUI

Here's my full code of my 'main' renderer components:

// 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>
   );
},

I want to make Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :

In the document of MUI here, this indicator comes with following styles:

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

With this styles I cant align it center horizontally, and without this styles, I can`t even locate it where I wanted.

What I have tried :

1. margin: 0 auto --> failed
2. text-align: center --> failed
3. display: flex --> failed
4. combination of 1 & 2 --> failed
5. left={$(window).width/2-20} --> This works but I'd like to use CSS only

Answer 1

The solution below centres progress indicator without any hacky calculations that cause element to be offset:

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

Answer 2

Here is how I did to ensure it's horizontally centered. Works great for me.

1. Set the parent component style to position: 'relative'.
2. Set the refresh indicator style to marginLeft: '50%', and left={-20} (assuming the size is 40).

here is the code (I put it in a CardText component).

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

Answer 3

In MUI v5, there is a Stack component which serves as a flexbox container. By default the direction is column, to center it horizontally you can set alignItems to center:

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

Live Demo

Answer 4

circularprocess in material ui and text middle of page stackoverflow

 <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]