Vertical alignment of a div using Semantic-UI
49,012
Solution 1
http://semantic-ui.com/examples/grid.html
Use middle aligned
class on grid
Solution 2
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/
Solution 3
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>
Author by
Michael Khait
Updated on September 19, 2020Comments
-
Michael Khait over 3 years
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>