How to find the center of the screen?

Question

I have a div,I need to show this div on the center of the screen (ie viewable area) even while the user scrolled through the page.

so its style should be (for example)

{position:fixed; top:90px; left:150 px; z-index:9999; overflow:hidden;}

Now i need to find the value of left and top, so that the div will place in the center of the screen (ie viewable area), for any page .

How can i find the value of left & top with a javascript or jquery ?

yes, but in that case div won'y come in the exact center of the screen — Linto, Sep 07 '12 at 20:39
top: -50% left: -50%, there are a LOT of examples on google... center a div — Leandro Bardelli, Sep 07 '12 at 20:40
jQuery function to center a div on the screen: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen — Nicodemeus, Sep 07 '12 at 20:40
https://www.google.com/search?&q=how+to+center+a+div+with+css — Leandro Bardelli, Sep 07 '12 at 20:41

score 5 · Accepted Answer · answered Sep 07 '12 at 20:39

5

left:50%; top:50%; puts you in the middle, then you apply a fixed width and height and set margin-top and margin-left to negative a half of that width and height.

answered Sep 07 '12 at 20:39

Niet the Dark Absol

320,036
81
464
592

But it doesn't position the div in the center of the page. – Ram Sep 07 '12 at 20:41
Actually width and height of the div is dynamic according to the content.And it won't work – Linto Sep 07 '12 at 20:42

tommarshall · Answer 2 · 2012-09-07T20:55:04.353

2

In order to center something with fixed positioning then you will need to know the height and width of the element.

You then just need to margin-top and margin-left to negative half of the width and height in order to center it.

E.g. this class would center and element that has 100px height and 200px width.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Update: If you don't know the height and width of the element that needs to be centered ahead of page load then you'll need to use JavaScript to detect the size.

Here's a working example of how this can be done - http://jsfiddle.net/3Ag97/1/

edited Sep 07 '12 at 20:55

answered Sep 07 '12 at 20:42

tommarshall

2,038
5
23
36

But in my case, i don't able to know the height and width of the div.It will be dynamic according to the content – Linto Sep 07 '12 at 20:44
In which case you'll need to use javascript to establish the height and width at load time. See this working example http://jsfiddle.net/3Ag97/1/ – tommarshall Sep 07 '12 at 20:54
Linto, you should put that in the question. – Gordon Bell Sep 07 '12 at 20:54

score 0 · Answer 3 · answered Sep 07 '12 at 20:44

0

You can use the flexbox module, although it's not widely supported yet: http://jsfiddle.net/b7nrS/.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

answered Sep 07 '12 at 20:44

pimvdb

151,816
78
307
352

score 0 · Answer 4 · answered Sep 07 '12 at 20:48

0

Try this:

var $box = $('#box');

var bw = $box.width() / 2;
var bh = $box.height() / 2;

var wh = $(window).height() / 2;
var ww = $(window).width() / 2;

$box.css({'left': ww-bw, "top": wh-bh})

http://jsfiddle.net/mqMwj/

answered Sep 07 '12 at 20:48

Ram

143,282
16
168
197

score 0 · Answer 5 · answered Sep 07 '12 at 20:49

0

function centerObject(selector) {
var x = $(window).height() - $(selector).height();
var y = $(window).width() - $(selector).width();
$(selector).css("left", y / 2).css("top", x / 2);
};

answered Sep 07 '12 at 20:49

Silviu Burcea

5,103
1
29
43

score 0 · Answer 6 · answered Sep 07 '12 at 20:51

0

#divX {
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -50px; 
    background-color: #0000FF;
}

answered Sep 07 '12 at 20:51

Gordon Bell

13,337
3
45
64

How to find the center of the screen?

6 Answers6