CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Lukman Hossain
Lukman Hossain

Reputation: 1

How to align center a circular progress bar in Material UI?

I am trying to implement a circular progress bar in a login form using material UI. Which can not be aligned in the center position: screenshot

 {isLoading && <CircularProgress />}
          {user?.email && (
            <Alert severity="success">
              Your Registration Created Successfully
            </Alert>
          )}

Upvotes: 0

Views: 4735

Answers (1)

timsntech
timsntech

Reputation: 216

Not really related to material UI, just a general styling issue / how to position and style your components. Just put your logic into a parent div (or any custom component) and use flexbox to center vertically and horizontally. Of course your parent div needs to be at the height, width, position etc how you need it to fit in your app.

Here an inline React example

const App = () => {
  return (
    <div
      style={{
        // do your styles depending on your needs.
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      {  
        // content to center here 
      }
    </div>
  );
};

export default App;

Upvotes: 2

Related Questions