I want to have a component exactly at the center of the screen.

This is my component, composed by stacking an image and some text:

return (
  <Grid>
            <Grid.Row>
                <Grid.Column width={1} />
                <Grid.Column width={14}>
                    <img src={upload} alt="Upload box" />
                </Grid.Column>
                <Grid.Column width={1} />
            </Grid.Row>
            <Grid.Row>
                <Grid.Column width={1} />
                <Grid.Column width={14}>
                    <div>Drop files here</div>
                </Grid.Column>
                <Grid.Column width={1} />
            </Grid.Row>
        </Grid>
  );

Then I have my app:

return (
  <div className="App">
    <Grid>
      <Grid.Row>
        <Grid.Column width={1} />
        <Grid.Column width={14}>
          <UploadBox />
        </Grid.Column>
        <Grid.Column width={1} />
      </Grid.Row>
    </Grid>
  </div>
);

The result is that my "UploadBox" is at the left side, with only a little space before the left border of the browser.

As semantic ui is calculated around 16 cols I was sure it was centered this way, but I'm getting something wrong...can you help me out?

1 Answers

0
Sahil Mittal On

Try using the following syntax to get a center-aligned grid:

<Grid centered columns={2}>
  <Grid.Column>
    <!-- grid content here -->
  </Grid.Column>
</Grid>