Put Button on Center Between Borders in CSS and MUI-CodePudding

I need to put the button on the center just like in the picture below. It should be on the lines. What is the proper and correct way to do this?

<MainContainer>
      <Stack spacing={1}>
        <Card sx={{ minWidth: 275 }}>
          <CardContent>
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              gutterBottom
            >
              Word of the Day
            </Typography>
            <Typography variant="h5" component="div">
              be{bull}nev{bull}o{bull}lent
            </Typography>
            <Typography sx={{ mb: 1.5 }} color="text.secondary">
              adjective
            </Typography>
            <Typography variant="body2">
              well meaning and kindly.
              <br />
              {'"a benevolent smile"'}
            </Typography>
          </CardContent>
        </Card>
      </Stack>
      <Stack justifyContent={"center"} alignItems={"center"}>
        <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
          Hello
        </Button>
      </Stack>
    </MainContainer>

CodePudding user response：

try

        <Button variant="contained" color="primary" sx={{ maxWidth: 50, margin: '0 auto' }}>

Note margin: '0 auto' CSS. Works on your very helpful, code sandbox.

CodePudding user response：

if you want it in the center, try this: align-items: center

<Stack justifyContent={"center"}>
  <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
    Hello
  </Button>
</Stack>

rewrite:

<Stack alignItems={"center"}>
  <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
    Hello
  </Button>
</Stack>

or you can keep both: justifyContent, alignItems

CodePudding user response：

Just add direction="row" to the stack. If you want it on the bottom dotted line then you'll have to adjust padding on the root css to remove bottom padding. ie. change padding: 3 to paddingTop: 3, paddingX: 3,