how to position row in the middle react semantic ui

how would i position the row to be in the middle using react semantic ui grid row? Wondering if there is another way besides increasing the padding-top until it reaches the middle

<Container>
        <Grid columns={4} divided>
          <Grid.Row>TITLE</Grid.Row>
          <Grid.Row>
            <Grid.Column width={4} color="violet" textAlign="center">
              <h3>Content</h3>
            </Grid.Column>
            <Grid.Column textAlign="center" width={4} color="violet">
              <h3>Content</h3>
            </Grid.Column>
            <Grid.Column textAlign="center" width={4} color="violet">
              <h3>Content</h3>
            </Grid.Column>
            <Grid.Column textAlign="center" width={4} color="violet">
              <h3>Content</h3>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>

Solution

You can use verticalAlign prop and provide a value middle to the Grid.Row to solve your issue. Also make sure to provide a height to the grid.

As per documentation:

A grid can specify its vertical alignment to have all its columns vertically centered. 
A row can specify its vertical alignment to have all its columns vertically centered.

Working demo is here

<Container style={{ height: "100vh", background: "lightblue" }}>
    <Grid
      style={{ height: "400px", background: "gray" }}
      columns={4}
      divided
      padded={false}
    >
      <Grid.Row verticalAlign="middle">
        <Grid.Column width={4} color="violet" textAlign="center">
          <h3>Content</h3>
        </Grid.Column>
        <Grid.Column textAlign="center" width={4} color="violet">
          <h3>Content</h3>
        </Grid.Column>
        <Grid.Column textAlign="center" width={4} color="violet">
          <h3>Content</h3>
        </Grid.Column>
        <Grid.Column textAlign="center" width={4} color="violet">
          <h3>Content</h3>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </Container>