Estoy tratando de alinear el componente en el centro. Pero soy incapaz de hacerlo.

Fragmento de componente:

 <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>

estilo de componente:

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

Probé la position: center en el componente con estilo, pero también dio el mismo resultado. ¿Cómo podría mover el "O" al centro?