How to position a div in the middle of the screen when the page is bigger than the screen

Question

Hi I'm using something similiar to the following to get a div positioned in the middle of the screen:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

However the problem with this is it positions the item in the middle of the page not the screen. So if the page is a few screen high and I'm at the top of the page (the top part of the part is displayed on the screen) when I make the div appear it's not even on the screen. You have to scroll down to view it.

Can someone please tell me how you'd make it appear in the middle of the screen?

I just tested that exact code on a test page and it centered the div perfectly on the page, even with about 100 **`
`** before it to try and push it down. Maybe try checking the rest of your code to see if you have something that is either over-writing the DIV's values or that is effecting your DIV to cause these issues. — Eli, Feb 16 '11 at 03:20

Hussein · Accepted Answer · 2011-02-16T03:32:36.593

283

just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

edited Feb 16 '11 at 03:32

answered Feb 16 '11 at 03:24

Hussein

42,480
25
113
143

1

You are life saver.. Simple solution works well even if the element has transform scale applied.. – Vinnie Nov 19 '15 at 09:23

score 102 · Answer 2 · edited Aug 23 '17 at 00:03

102

I think this is a simple solution:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

edited Aug 23 '17 at 00:03

Chava Geldzahler

3,605
1
18
32

answered Aug 01 '13 at 14:00

user2684935

1,033
1
7
3

8

this approach is far more better than approved answer – Viacheslav Dobromyslov Sep 13 '13 at 00:46
2

loved this one, but does this work in "older" browser? – BernaMariano Feb 05 '14 at 19:46
Worked for me, optimized code... more awesome than accepted answer. – Kartik Dolas Dec 27 '22 at 05:33

Erdogan · Answer 3 · 2016-05-27T10:37:37.000

Use transform;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Javascript Solution :

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

score 17 · Answer 4 · answered Oct 03 '19 at 10:37

17

Try this one.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

answered Oct 03 '19 at 10:37

Chandan Sharma

2,321
22
22

2

I think this one is more useful 'cuz you don't need to apply any style to the parent element. – canbax Mar 11 '20 at 07:32

score 6 · Answer 5 · answered Feb 03 '14 at 20:29

Just put margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

score 4 · Answer 6 · answered Mar 19 '16 at 23:27

4

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

This worked for me

answered Mar 19 '16 at 23:27

Abraham

41
1

3

While this may technically be correct, you want to include a brief description of why this solves the problem for context – drneel Mar 19 '16 at 23:47

Parth · Answer 7 · 2016-03-08T09:53:27.777

2

Short answer, Just add position:fixed and that will solve your problem

edited Mar 08 '16 at 09:53

answered Oct 31 '15 at 06:54

Parth

1,114
3
16
25

score 1 · Answer 8 · answered Feb 15 '17 at 11:22

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

answered Feb 15 '17 at 11:22

Maitrey Malve

11
1

The question was asked me in the interview "how you align the div center of the screen? " – Maitrey Malve Feb 15 '17 at 11:50

score 1 · Answer 9 · answered Jun 21 '17 at 13:59

Well, below is the working example for this.

This will handle the center position if you resize the webpage or load in anysize.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

In above sample loading div will always be in center.

Hoping this will help you :)

score 1 · Answer 10 · edited Jun 20 '20 at 09:12

Two ways to position a tag in the middle of screen or its parent tag:

Using positions:

Set the parent tag position to relative (if the target tag has a parent tag) and then set the target tag style like this:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Using flex:

The parent tag style should looks like this:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

score 1 · Answer 11 · answered Sep 25 '20 at 09:56

1

#div {
    top: 50%;
    left: 50%;
    position:fixed;
}

just set the above three properties any of your element and there you Go!

Your div is exactly at the center of the screen

answered Sep 25 '20 at 09:56

KMJ

5
2

score 0 · Answer 12 · answered Apr 25 '17 at 04:57

0

In ur script page...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Use a-middle class in the Div...

   <div class="a-middle">

answered Apr 25 '17 at 04:57

Antony Jack

1

score -1 · Answer 13 · answered Jan 13 '18 at 09:03

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

score -1 · Answer 14 · answered Feb 21 '20 at 18:09

-1

USING FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

answered Feb 21 '20 at 18:09

ASIR THERANS RAJA M

1

This centers content to the parent element or page, not the screen. – Sean Feb 21 '20 at 20:36

score -2 · Answer 15 · answered Jun 21 '18 at 03:25

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

answered Jun 21 '18 at 03:25

LukASh

1

Add some explanation – Pankaj Makwana Jun 21 '18 at 05:33

Scott Radcliff · Answer 16 · 2011-02-16T03:30:20.103

-4

For this you would have to detect screen size. That is not possible with CSS or HTML; you need JavaScript. Here is the Mozilla Developer Center entry on window properties https://developer.mozilla.org/en/DOM/window#Properties

Detect the available height and position accordingly.

edited Feb 16 '11 at 03:30

answered Feb 16 '11 at 03:20

Scott Radcliff

1,501
1
9
13

How to position a div in the middle of the screen when the page is bigger than the screen

16 Answers16

Using positions:

Using flex:

Linked