Centering absolute positioned DIV even after window re-size (for responsive design)

Question

I want to keep an absolute positioned DIV #box at the middle of the screen even after window re-size and for all major device (responsive design). Responsive #box is done using css3 media queries while left is calculated using jquery. But I can positioned my box exactly at the center, on window re-size for small screen there is unequal left & right margins.

<HTML>

<body>
    <div id ="box">
      <a> is am athe centre?'</a>
    </div>
</body>



</HTML>

css :

 #box {
      position:absolute;
      background:red; 
      width:900px; 
      height:400px;
      }

@media only screen and (min-width: 979px)


{
 #box{width:760px;background:yellow;}
}


@media only screen and (min-width: 768px) and (max-width: 979px)

{
#box{width:760px;background:pink;}
}



@media only screen and (min-width: 480px) and (max-width: 767px) 

{
#box{width:460px;background:black;}
}


@media only screen and (min-width: 321px) and (max-width: 479px) 

{
#box{width:300px;background:blue;}
}


@media only screen and (max-width: 320px) 

{
#box{width:300px;background:grey;}
}

jQuery :

function leftmargin(){
 var w_box    =  ($('#box').width());
 var w_window = $(window).width();
 var w_left = (w_window - w_box)/2 ;
 $("#box").css("left", w_left + "px");
}

$(window).resize(function() {
   leftmargin();
});

$(document).ready(function() {
   leftmargin();
});

score 3 · Answer 1 · answered Jul 29 '13 at 14:47

3

You can just add this and not even need media queries or javascript (since you know the size of the box):

#box {
  position:absolute;
  background:red; 
  width:900px; 
  height:400px;
  top: 50%;
  left: 50%;
  margin-top: -200px; // half total width (border, padding, and width)
  margin-left: -450px; // half total height (border, padding, and width)
}

And if you didn't know the width, but were okay with just targeting modern browsers that support transform, replace the margins with:

transform: translate(-50%, -50%);

answered Jul 29 '13 at 14:47

kalley

18,072
2
39
36

This is okey for large screen with fixed width and height; but my #box with variable width and height for responsive design. – galexy Jul 29 '13 at 14:50
Then use the second option. It will work even if you use percentages for height and width. Media queries and transforms have the same browser-share, so you could easily use your javascript for older browsers that don't support transforms. – kalley Jul 29 '13 at 15:24

Aayushi Jain · Answer 2 · 2013-07-29T14:59:48.963

1

Take the width and height in %.

See this fiddle: Fiddle

I have added:

body{
    width: 100%;
    margin: 0 auto;
}
#box {
      position:absolute;
      background:red; 
      width:80%; 
      height:40%;
      margin-left: 10%;
      margin-top: 20%;
}

edited Jul 29 '13 at 14:59

answered Jul 29 '13 at 14:52

Aayushi Jain

2,861
2
29
36

Thanks for suggestion aayushi! But I want to stick with exact width and not with percentage width. – galexy Jul 29 '13 at 14:57
Ok, check the updated fiddle then, change `width: 900px and height: 450px;` and test. – Aayushi Jain Jul 29 '13 at 14:59
Its works well! as width is in proportion with window width. But in my case Box width is for different screen sizes are different. – galexy Jul 29 '13 at 15:02

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

Center the box using CSS (source), then adapt the width and the margin-left in you media queries:

#box {
    position:absolute;
    border:1px solid red;
    width:760px;
    height:30px;
    background:yellow;
    left: 50%;
    margin-left:-380px; /* half of the box */
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
    #box {
        background:pink;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px)  {
    #box {
        width:460px;
        background:black;
        margin-left:-230px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 479px)  {
    #box {
        width:300px;
        background:blue;
        margin-left:-150px;
    }
}
@media only screen and (max-width: 320px) {
    #box {
        background:grey;
    }
}

Demo here, drag the inner frame boundary to „simulate device sizes“: http://jsfiddle.net/hD657/3/

Solution based on your JavaScript: http://jsfiddle.net/NnDvs/

Answer to your comment:

margin-left is calculated based on the width of the box, so this is independent on any viewport or window width. I guess from your comment that your box is just off by some pixels (you should state that more clearly so we can help better). jQuery's width will return the width "without" the scrollbar, so it changes based on the height of the contents (i.e. if there is a scrollbar or not). You could try to "hide" the scrollbars temporary before getting the width: document.body.style.overflow = "hidden";. But in general, I would say that the returned value of .width() should be what you are looking for. Is this what you are looking for?

edited May 23 '17 at 12:29

Community

1
1

answered Jul 29 '13 at 15:09

Wolfram

8,044
3
45
66

Thanks for the answer !This is close to what actually I want. This works fine on specific screen sizes. But I want to implement margin-left using jquery, so even on single pixel re-size my div box remains always at the center. – galexy Jul 29 '13 at 15:16
1

This is what the `left:50%` actually does. Does the width of your box change when the viewport width is changed by 1px? Then see my JavaScript solution. The value for `margin-left` is set on `resize` and calculated using the current width of the box. – Wolfram Jul 29 '13 at 15:23
Updated the second solution, the box is now `30%` wide, so it changes constantly: http://jsfiddle.net/NnDvs/1/ – Wolfram Jul 29 '13 at 15:27
Its nice Wolfarm ! I already have provided the same along with my question, Now I have one doubt that we are calculating leftmargin using window width and not the actually viewport width . Is window width include vertical scrollbar width too?.if it is, then this 17px width of scroll-bar responsible for unequal margin on both side while resizing . – galexy Jul 29 '13 at 15:40
Updated my answer, as the comment became too long. – Wolfram Jul 29 '13 at 15:59
I want to confirm whether window.width() returns 1024 px or 1024-17px for 1024 x 768 screen,as I can see your suggested code is perfect to work with. But for small screen I can see my box doesn't remains at center by some pixel. As now I am checking with having scroll-bar for all screen widths. so I think I am centering DIV on viweport width but maginLeft is evaluated using window width. – galexy Jul 29 '13 at 18:56
Thanks wolfram for your valuable help! just referenced this: http://stackoverflow.com/questions/8339377/jquery-how-to-get-screen-width-without-scrollbar – galexy Jul 29 '13 at 19:12

score 0 · Answer 4 · answered Jul 29 '13 at 15:00

0

Not quite sure what you want, centering an absolute positioned div is easy but what's this about responsive design and variable width/height?

The best I can come up with is to use display table cell:

html {
    display: table;
    width: 100%;
    height: 100%;
}
body {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#box {
    display: inline-block;
    background: #c00;
}

http://jsfiddle.net/f00dmonsta/cZC3g/

answered Jul 29 '13 at 15:00

Populus

7,470
3
38
54

see my css3 media queries! for different screen sizes my #box having different width ( width varying according to screen size) . So I want to center my #box for all screen sizes. – galexy Jul 29 '13 at 15:07
you can use your media queries, the setup above should center a `#box` of any width/height... – Populus Jul 29 '13 at 15:40

Centering absolute positioned DIV even after window re-size (for responsive design)

4 Answers4

Linked