Center div on the middle of screen

CssSemantic Ui

Css Problem Overview

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>

Css Solutions

Solution 1 - Css

This should work with any div or screen size:

.center-screen {
  display: flex;
  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;

Solution 2 - Css

2018: CSS3

div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

This is even shorter. For more information see this: CSS: Centering Things

Solution 3 - Css

The best way to align a div in center both horizontally and vertically will be

HTML

<div></div>

CSS:

div {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: blue;
}

FIDDLE

Solution 4 - Css

Try this:

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

Here div is html tag. You wrote a html tag followed by a dot that is wrong.Only a class is written followed by dot.

Solution 5 - Css

Your code is correct you just used .div instead of div

HTML

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

CSS

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

Check out this Fiddle

Categories
Recommended Css Solutions
Recommended Semantic Ui Solutions

Previous Solution:

ActiveRecord OR query Hash notation

Ruby on-RailsRuby on-Rails-4ActiverecordRails ActiverecordRuby on-Rails-5

Next Solution:

How to deploy an Electron app as an executable or installable in Windows?

WindowsDeploymentDesktop ApplicationElectron

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questioncarloss medranooView Question on Stackoverflow
Solution 1 - CssCanerView Answer on Stackoverflow
Solution 2 - CssNixen85View Answer on Stackoverflow
Solution 3 - CssHemalView Answer on Stackoverflow
Solution 4 - CssAbdus Sattar BhuiyanView Answer on Stackoverflow
Solution 5 - CssMalik NaikView Answer on Stackoverflow