Vertical & horizontal centering options in grid?

[hjhjdev]

Hello, I was playing with carbon components, found there's no centering options in this package. Like creating login page, there's a need for centering options in grid. From carbon design guidelines, we can see some images like below:

Are there ways to achieve this? Simply adding parent div and adding flexbox doesn't work at all.

[metonym]

Generally, I would recommend writing custom CSS for vertical/horizontal centering.

However, if you're using the Grid from Carbon, you can use the offset prop to "center" a column.

Carbon Components Svelte forces a 16 column grid. In the example below, we have a column that spans 4 columns and has a left offset of 6 columns.

6 + 4 + 6 = 16

<Grid>
  <Row>
    <Column xlg={{ span: 4, offset: 6 }}>Column</Column>
  </Row>
</Grid>