7

I am having a div, which should be centre of the window, even after scrolling. How to achieve it

http://www.flickr.com/photos/41695354@N08/4496376638/

Rajasekar
  • 17,278
  • 31
  • 97
  • 132

4 Answers4

29

You can do it with a fixed width positioned in center and with negative margins with half of the width and half of the height. So for a div with id your_div that is 200x200 in size, you'd do:

#your_div {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}
reko_t
  • 51,428
  • 9
  • 82
  • 76
  • 2
    "fixed" isn't a supported position value in IE6 (http://www.quirksmode.org/css/position.html) – James Hughes Apr 06 '10 at 07:24
  • 13
    @kouPhax we shouldn't make websites for IE6 then no one will use it and we won't have as many problems as today – ant Apr 06 '10 at 09:37
  • Totally disagree with that statement. MS are still committed to support IE6 until 2013 so it's not just "going away" until such times as corporate environments are forced to upgrade. Why would you want to hinder nearly 20% of your visitors (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2) just to make a stand? Is it fair to take it out on them? – James Hughes Apr 06 '10 at 09:53
  • @reko_t : it worked ...thanks – Poonam Bhatt Nov 26 '12 at 07:26
  • Exellent! Thank you very much. – AJ OP Jan 07 '13 at 10:44
  • 4
    And now it's midway through 2014; can we drop IE6 yet? – T.W.R. Cole Jul 09 '14 at 15:46
  • [0.15% of users are on IE6](http://caniuse.com/usage_table.php). Up to you :P – aug Dec 18 '14 at 22:57
  • Occording to http://www.w3schools.com/browsers/browsers_explorer.asp, we don't have enough users on IE6 as of now. Safe to drop it. – klewis Dec 18 '15 at 13:47
  • Now that it’s 2019 it seems unbelievable that IE6 didn’t support something so widely used such as position: fixed – Simone May 10 '19 at 12:44
2

I suggest the following solution:

1) In JS when you want to show a window:

{
var width = $(window).width();
var heigth = $(window).height();
var myWindow = $('.my-window');
    myWindow .show('fast');
    myWindow .offset(
    {
        left: (width - myWindow .width()) / 2 + $(window).scrollLeft(),
        top: (heigth - myWindow .height()) / 2 + $(window).scrollTop()
    });
}

2) in CSS: .my-window

{
    position: fixed;
}
BotanMan
  • 1,247
  • 11
  • 23
2

I was looking this up myself and this post came up first. With further research I found this link instead which I think is the best cross browser solution:

Using jQuery to center a DIV on the screen

Basically to use jquery to overcome the IE6 issues just take the $(window).scrollTop() and $(window).scrollLeft() into consideration.

Hope this helps.

Steve

Community
  • 1
  • 1
Steven Cheng
  • 1,041
  • 3
  • 14
  • 25
1

If you have to support IE 6 then you have to append the div element to the body and set the position as "absolute". Make the position attribute of the body element as "relative". And apply the rest of the styles suggested by reko_t. That should keep the div in the center as you scroll.

Apart from that, I would suggest you to consider one more case when you want to position some div in the center of the page. If your viewport's size is smaller than the div which you are positioning in the center then as you scroll you'll end up seeing the same portion of the div until you resize the window to be bigger than that of the div.

To solve this case, you should go for a javascript solution rather than a pure css solution. You should define a window resize listener. If the resized window's viewport is smaller then position the div in the left-top corner of the viewport and disable the onscroll listener. If the resized window's viewport is bigger than the div then your onscroll listener should apply the styles suggested by reko_t.

Mandai
  • 171
  • 2
  • 13