LYTSExamples

Overlay

Use Clamp to create an overlay which is centered both horizontally and vertically.

// Edit the live code below

<Clamp clamp={['300px', '250px']} style={{ height: '450px' }}>

  <Box xAlign='center' yAlign='center' style={{ height: '100%' }}>

    Centered overlay

  </Box>

</Clamp>

Using clamp for the overlay also makes sure that the child shrinks when the vertical space is small (e.g. on phones).