React Material UI - Center Box vertically

Question

I use a box wrapper from MUI on my content and i want to center it vertically, so it'l be responsive when resizing window & in diff resolutions. Tried to use all 'Justify' combos but it didnt help:

<Box 
      margin='auto'
      justifyContent='center'
      bgcolor='#404040'
      borderRadius='12px'
      boxShadow='2'
      width='1000px'
      height='700px'>
      <div className="title"> NBA Bet </div>
 </Box>

score 2 · Answer 1 · answered Nov 25 '21 at 11:59

2

You can use flex display mode:

display='flex'
justifyContent='center'

answered Nov 25 '21 at 11:59

v1s10n_4

598
3
18

flex maybe helped center the content inside the box, but i wanted to center the box itself vetically (the box has bgcolor and i want it to hold all the data and be centered) – Segev Nov 26 '21 at 10:23

hotcakedev · Answer 2 · 2021-11-25T12:13:47.857

<Box
  display="flex"
  flexDirection="column"
  alignItems="center"
  bgcolor='#404040'
  borderRadius='12px'
  boxShadow='2'
  width='1000px'
  height='700px'
>
  <div className="title"> NBA Bet </div>
 </Box>

You should look into the flexbox how to center children vertically. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items

And not sure what version of material ui you use 4 or 5, but you could have a look at the Box component and flexbox in version 4. https://v4.mui.com/system/flexbox/#align-items

React Material UI - Center Box vertically

2 Answers2