Center div on the middle of screen

Question

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>

You want both the columns horizontally and vertically centered? — m4n0, Jul 04 '15 at 05:49

score 204 · Answer 1 · edited Aug 17 '21 at 22:32

204

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;

edited Aug 17 '21 at 22:32

Aryan Beezadhur

4,503
4
21
42

answered Dec 30 '17 at 02:14

Caner

57,267
35
174
180

2

This is the best solution, but a friendly reminder: this does not work in older versions of Internet Explorer. – Richh94 Feb 14 '19 at 09:56
1

@Caner Is there a way to avoid the scrollbar which will always appear? – Esko Dec 12 '19 at 14:27
1

@Esko you can make `min-height` smaller, for example `min-height: 95vh;` – Caner Dec 13 '19 at 05:04
1

@Esko I've solved this with calc(100vh - 1rem) since 1rem is supposed to be the text height – Michal Cikatricis Oct 15 '21 at 11:29
Worked but removed min-height attribute (Not necessary) – Master Of Disaster Dec 13 '22 at 17:50

Nixen85 · Answer 2 · 2022-10-20T08:15:00.173

88

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

edited Oct 20 '22 at 08:15

answered Jun 19 '18 at 09:58

Nixen85

1,253
8
24

This works for me in that it centers the div, but some of the elements in the div are now blurred. – mellis481 Jul 20 '18 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 '18 at 03: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 '18 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 '18 at 16:13

score 36 · Answer 3 · answered Jul 04 '15 at 05:47

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

score 1 · Answer 4 · answered Jul 04 '15 at 05:40

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.

score 1 · Answer 5 · answered Jul 04 '15 at 07:51

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

Center div on the middle of screen

5 Answers5

Linked