Calculating screen height and centering

Question

I am building a new website using Bootstrap and some Jquery. Is there a way to calculate the screen height and centering a div vertically based on the screen height? I am not used to Jquery, but managed to do som other stuff anyway, but please be gentle :-)

Check this [link](http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa), it will help you. — Shri, Sep 25 '13 at 14:54

jswolf · Answer 1 · 2013-09-26T06:43:01.023

A function that reacts to changes in heights and widths

html:

<div id="mydiv1">
   <div id="mydiv2">
       <p>Middle of Middle :)</p>
   </div>
</div>

js jquery

It could also be a function in programming but I think it is time more clearly

function SetWidthAndHeight(getelement) {
    var winH = $(window).height();
    var winW = $(window).width();
    getelement.css('top', winH / 2 - getelement.height() / 2);
    getelement.css('left', winW / 2 - getelement.width() / 2);
}
function SetCenterOfAreDiv(ele,from) {
    var winH = from.height();
    var winW = from.width();
    ele.css('top', winH / 2 - ele.height() / 2);
    ele.css('left', winW / 2 - ele.width() / 2);
}
$(function () {
    // on change orientation
    window.addEventListener("orientationchange", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
    // on change resize
    window.addEventListener("resize", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
});

SetWidthAndHeight($('#mydiv1'));
SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));

css

#mydiv1 {
    height:100px;
    width:80%;
    background-color:green;
    position:absolute;
}
#mydiv2 {
    height:50px;
    width:30%;
    background-color:blue;
    position:absolute;
    text-align:center;
    color:#FFF;
}

Here the live Demo: http://jsfiddle.net/A7PWR/

`(width1 - width2) / 2` does the same thing as the separate divide by 2s — iCollect.it Ltd, Sep 25 '13 at 15:09
Jswolf thanks, sorry If I was not clear about my problem. I would like a div to expand across the entire height of the screen, and inside the div is another div that should center (this part should be done by CSS I think). Please check [link](http://vielendank.dk/bootstrap) It is the top blue part that should stretch. — Kasper Lægård, Sep 25 '13 at 18:29
Almost there. I have tried implementing this solution, but I need the green #mydiv1 to calculate the screen height and fill it(#mydiv2 should be centered as in your solution), hiding whatever content being below. The user should then scroll down to see more content. I do not know if I make sense. — Kasper Lægård, Sep 27 '13 at 20:37

score 0 · Answer 2 · answered Sep 25 '13 at 14:56

You can use jquery .height() method for calculate the window height.

Jquery code for centering a div according to window height:

    var winH = $(window).height(); //-- For calculate window height 
    var winW = $(window).width(); //-- For calculate window width
    $('#MyDiv').css('top', winH / 2 - $('#MyDiv').height() / 2); //-- For centering div according to window height
    $('#MyDiv').css('left', winW / 2 - $('#MyDiv').width() / 2); //-- For centering div according to window width

score 0 · Answer 3 · answered Sep 25 '13 at 15:09

If you already know the height of the element it's CSS only:

.element {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  background: #FFF;
}

If you don't know the element width and height. You can combine it with a little bit of javascript.

var $element = $('.element');

$element.css({
  marginTop: 0 - Math.round( $element.height() / 2 ),
  marginLeft: 0 - Math.round( $element.width() / 2 )
});

Hope that helps :)

score 0 · Answer 4 · answered Sep 25 '13 at 15:30

If all you are trying to do is to position a div in the center of the screen, you do not need jQuery/JavaScript to do it. Use CSS instead. It is better, faster, and you will not (potentially) see the "pixel-by-pixel" "robotic" movement of an element when dynamically positioning. Here is how to do it with CSS:

.centerBox {
  position: absolute;
  width: 300px;
  height: 4000px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -150px;
}

So then you just use it like this:

...
<div class="centerBox"> bla bla bla </div>
...

Calculating screen height and centering

4 Answers4