'MUI Progress Indicator center align horizontally

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 :

enter image description here

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
cssreactjsmaterial-ui


Solution 1:[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>

Solution 2:[2]

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

Codesandbox Demo

Solution 3:[3]

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]

Solution 4:[4]

The Backdrop Component will place the progress indicator in the center and also can add a dimmed layer over your application. This component is available with MUI V5.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kevin Crain
Solution 2 NearHuscarl
Solution 3 Soma sundara
Solution 4 mohit uprim

Related Questions