Unable to center the content within a Material UI TableCell

Question

I have TableCell which shows a status and a Button. I want them to be vertically stacked and centered in the cell. I am able to get either working separately but not together. I am using FlexBox to vertically stack the elements. Relevant code show below.

<TableCell align="center" sx={{color:'warning.main', display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 200}}>
   {status}
  <Button variant='contained'
    onClick={() => setOpen(true)}
    sx={{ m: 1 }}>
       Add manual payment
   </Button>
 </TableCell>

The output is like so: Not sure what is missing here. It works fine if I don't use FlexBox but then the status and Button stack horizontally. I have tried alignItems, textAlign and all similar properties I could think of. Using MUI version 5.1.1,

Answer 1

You should add textAlign: 'center' and margin: 'auto' to TableCell

• textAlign: 'center' is for status text center
• margin: 'auto' is to center status and button when they have spare space from both sides (left and right)

<TableCell align="center" sx={{color:'warning.main', display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 200, margin: 'auto', textAlign: 'center'}}>
   {status}
  <Button variant='contained'
    onClick={() => setOpen(true)}
    sx={{ m: 1 }}>
       Add manual payment
   </Button>
 </TableCell>