Div horizontally center and vertically middle

#div {
    height: 200px;
    width: 100px;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -50px;
}

This is a common method to center a div. You position it absolutely, then move it half way across and half way down. Then adjust the position with margins by half the dimensions of the div you are positioning.

For reference (this uses fixed positioning though to keep the div in place even when scrolling, helpful when doing modal popups.. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Try this:

.loginDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
    margin-left: -273px; /*half width*/
    margin-top: -132px; /*half height*/
}

You move it to the center, and than back left and up by half the dimensions - that will center it even on resize

Make a div that is for the content of the page and make a "content" class with the following css. This worked for me on Jquery Mobile with Phonegap for Android devices. Hope it helps someone.

CSS

.content {
    width: 100%;
    height: 100%;
    top: 25%;
    left: 25%;
    right: 25%;
    text-align: center;
    position: fixed;
}