95

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>
2
  • You want both the columns horizontally and vertically centered?
    – m4n0
    Jul 4, 2015 at 5:49
  • 1
    Used .div instead of div in css
    – Vega
    Dec 3, 2018 at 0:05

5 Answers 5

211

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;

5
  • 2
    This is the best solution, but a friendly reminder: this does not work in older versions of Internet Explorer.
    – Richh94
    Feb 14, 2019 at 9:56
  • 1
    @Caner Is there a way to avoid the scrollbar which will always appear?
    – Esko
    Dec 12, 2019 at 14:27
  • 1
    @Esko you can make min-height smaller, for example min-height: 95vh;
    – Caner
    Dec 13, 2019 at 5:04
  • 1
    @Esko I've solved this with calc(100vh - 1rem) since 1rem is supposed to be the text height Oct 15, 2021 at 11:29
  • Worked but removed min-height attribute (Not necessary) Dec 13, 2022 at 17:50
95

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

4
  • This works for me in that it centers the div, but some of the elements in the div are now blurred.
    – mellis481
    Jul 20, 2018 at 15:03
  • 3
    Not even 2018. CSS3 has been around long enough that it works on all current browsers. One suggestion: position: fixed centers it on the screen, as requested. One question: what is the significance of margin-right: -50% ? In my testing it seemed to work just as well without. Thanks for a good answer.
    – Manngo
    Jul 22, 2018 at 3:02
  • 1
    this centers in the middle of the page not in the middle of the screen. If the page is longer than the screen height this will cause a problem
    – Caner
    Jul 24, 2018 at 11:09
  • 3
    @Manngo "The 'margin-right: -50%' is needed to compensate the 'left: 50%'. The 'left' rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container. By saying that the right margin of the element is further to the right by that same amount, the maximum line length is again the same as the container's width.[...]"When you remove the 'margin-right: -50%' and resize the window, you'll see that the sentences will be broken already when the window is still twice as wide as the text lines."src: see link above
    – Nixen85
    Sep 25, 2018 at 16:13
36

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

1

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.

1

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.