Styling a react component in styled-component

Question

I am trying to align the component in the center. But I am unable to do so.

Component snippet:

<Grid item xs={12}>
              <Box marginTop={2} marginBottom={2} display="flex">
                <Box width="100%">
                  <Divider />
                </Box>
                <Box width="100%">
                  <OrLabel>OR</OrLabel>
                </Box>
                <Box width="50%">
                  <Divider />
                </Box>
              </Box>
            </Grid>

component styling:

export const OrLabel = styled.span`
  position: absolute;
  margin-top: -10px;
  margin-left: -10px;
`;

I tried the position: center in the styled-component, but it also giving the same result. How could I move the "OR" to the center?

Answer 1

please try it:

 <Box style{{display:"flex",alignItem:"center",justyfyContent:"center"}} width="100%"> <OrLabel>OR</OrLabel> </Box>