jquery - 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 · Accepted Answer

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%);

score 1 · Accepted Answer

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%;
}

score 1 · Accepted Answer

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?

score 0 · Accepted Answer

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/

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

4 回答 4

Related

Reference