semantic-ui-react center elements in a grid container both horizontally and vertically

Question

I have a Semantic UI React Grid container that contains two columns:

export default function HomePage() {

    return (
        <>
            <Grid container doubling divided stackable columns={2}>
                <Grid.Column width={5} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Container>
                        <Header as='h1' color="black" style={{ fontSize: '360%' }}>
                            Welcome!
                        </Header>
                        <Header as='h2'>
                            Welcome new message!
                            <Header.Content>
                                <Header.Subheader>Small welcome message!</Header.Subheader>
                            </Header.Content>
                        </Header>

                    </Container>
                </Grid.Column>
                <Grid.Column width={11} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Image src='/images/savannah.png' />
                </Grid.Column>
            </Grid>
        </>
    )
}

Resulting in this:

Is there any way to center the elements inside the Grid container both horizontally and vertically like below:

Using style={{ display: "flex", alignItems: "center", justifyContent: "center" }} on the Grid container has no effect whatsoever.

Answer 1

There are many possible approaches, perhaps a basic solution is to try wrap the current component in a container with a custom class (or inline styles) for layout.

This way, the behavior of the Semantic UI grid container is preserved, and a custom layout can be specified.

Live demo of minimized example: stackblitz

Example:

.custom-layout {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

export default function HomePage() {
  return (
    <main className="custom-layout">
      <Grid container doubling divided stackable columns={2}>
        <Grid.Column
          width={5}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Container>
            <Header as="h1" color="black" style={{ fontSize: '360%' }}>
              Welcome!
            </Header>
            <Header as="h2">
              Welcome new message!
              <Header.Content>
                <Header.Subheader>Small welcome message!</Header.Subheader>
              </Header.Content>
            </Header>
          </Container>
        </Grid.Column>
        <Grid.Column
          width={11}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Image src='/images/savannah.png' />
        </Grid.Column>
      </Grid>
    </main>
  );
}