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