Question 46124 in CSS Question posted in
Some basic documentation can be found here.

React Material UI – How to centre contents to the middle of the page – CSS

At the moment, the button is outputting on the top left corner. How to bring the button to the middle of the page?

import {Button} from '@mui/material';

function App() {
  return (
      <Button variant="contained">Hello World</Button>
  );
}

export default App;

Tried the above code but obviously requires more changes to centre it

Tags:

2

Answers


  1. 0

    You can use the Box tag:

    <Box textAlign='center'>
  <Button variant='contained'>
     Hello World
  </Button>
</Box>
    Login or Signup to reply.
  2. 0

    You have to use Grid, if you don’t want to add custom styles

    import { Button, Grid } from "@mui/material";

function App() {
  return (
    <Grid container justifyContent="center" alignItems="center">
      <Button variant="contained">Hello World</Button>
    </Grid>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search