Vertical alignment of a div using Semantic-UI

Question

I can't seem to find it anywhere in the docs.

Is there a way to vertically center a div on the page using Semantic-UI semantics :)

Here is what I'm trying to do:

<div class="ui centered grid">
  <div class="eight column wide">
    <div>I want to be centered vertically on a page</div>
  </div>
</div>

I actually went ahead and implemented it ["manully"](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Michael Khait, Jun 02 '15 at 19:00

score 51 · Accepted Answer · answered Jun 03 '16 at 04:42

51

http://semantic-ui.com/examples/grid.html

Use middle aligned class on grid

answered Jun 03 '16 at 04:42

Uday Hiwarale

4,028
6
45
48

2

Note: If there is a `ui container` tag before the `ui grid` `middle aligned` don't works properly, remove ui container and it's going to work, thanx. – Erdi Sep 15 '18 at 11:54

score 8 · Answer 2 · answered Sep 18 '18 at 16:46

This issue was reported HERE early 2018 but closed.

However, you can try this :

<div id="my-container" class="ui grid middle aligned">
  <div class="row">
    <div class="column">
      <div class="ui text container segment inverted">
        <h1>My DIV</h1>
      </div>
    </div>
  </div>
</div>

Make sure your container is tall enough

#my-container {
  background: #000;
  height: 100vh;
  width: 100%;
}

Try it on JSFiddle : https://jsfiddle.net/Peyothe/6rjmdu1x/

Thanks class="ui grid centered middle aligned" worked for me — John Kitonyo, Apr 22 '21 at 19:43

Simon H · Answer 3 · 2015-09-08T16:17:35.677

5

I just achieved this by using middle and setting heights to certain elements:

.holder {
  height: 400px
}
.holder .middle {
  height: 100%
}

<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />

<div class="holder">
  <div class="ui middle aligned grid">
    <div class="eight column wide">
      <div>I want to be centered vertically on a page</div>
    </div>
  </div>
</div>

edited Sep 08 '15 at 16:17

answered Aug 03 '15 at 10:27

Simon H

20,332
14
71
128

5

Doesn't work. I don't know if it used to but if you run the snippet, you will see that the text is not vertically centered. – johnchar Feb 15 '18 at 11:16

Vertical alignment of a div using Semantic-UI

3 Answers3