Center div on the middle of screen

css semantic-ui
carloss medranoo picture carloss medranoo · Jul 4, 2015 · Viewed 117.6k times · Source

What is the best pattern to align a semantic ui grid in the middle of the screen?

the css for this will ideal be this one.

.div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

But on semantic this dont look well with grids.

This is part of my html.

 <div class="ui grid container">
    <div class="ui center aligned three column grid">
      <div class="column">
      </div>
      <div class="column">
        </div>
      </div>
  </div>

Answer

Caner picture Caner · Dec 30, 2017

This should work with any div or screen size:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

See more details about flex here. This should work on most of the browsers, see compatibility matrix here.

Update: If you don't want the scroll bar, make min-height smaller, for example min-height: 95vh;

Related questions

Semantic UI centre aligned login box?

I am using the Semantic UI framework for my website. I want to place the login box in the centre of the page.I want only the login box in the page. I don't understand how to centre aligned using …

Read More
Vertical alignment of a div using Semantic-UI

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"> <…

Read More
Semantic UI footer at the end

I'm using Semantic-UI in my project. I created an index page, everything works ok with the elements (navbar, footer, etc). Now Im dev a signup page but footer does not goes to the end of the page, what can I …

Read More