Div horizontally center and vertically middle

Question

I want to align a div horizontally center and vertically middle of the body of a page.

The css:

.loginBody {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}
.loginDiv {
    position: absolute;
    left: 35%;
    top: 35%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
}

And I have this html:

<body class="loginBody">
    <form id="form1">
    <div class="loginDiv">

    </div>
    </form>
</body>

Now it is behaving as I want it to, but if I resize the browser, it became completely distorted, perhaps this is because the absolute positioning. I am showing some of the screenshots: in resized firefox: enter image description here

in resized chrome: enter image description here

in resized ie: enter image description here

in maximized window it is: enter image description here

Is there any way to solve this problem and achieve this centered alignment using relative positioning?

Thanks.

Edit:

In firefox no scrollbar appears while resizing but it appears in other browsers. enter image description here

score 20 · Accepted Answer · edited Jun 19 '15 at 12:29

20

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

edited Jun 19 '15 at 12:29

Marcus Mangelsdorf

2,852
1
30
40

answered Mar 11 '12 at 15:47

StilgarBF

1,060
8
17

Thanks for help. it is now working but one problem in firefox there is no scrollbar while resizing but it is present in other browsers. I have updated my question. Please look at it. – Tapas Bose Mar 11 '12 at 15:55
if you don't want scrollbars - just add `overflow:hidden` to body – StilgarBF Mar 11 '12 at 16:00
no I want scrollbar, so I set `overflow: auto` in body but still there is no scrollbar as depicted. – Tapas Bose Mar 11 '12 at 16:03
if you want a scrollbar, you have to add `overflow:scroll;` It would be helping to see that live. maybe setup a dummy-page. if the page gets to narrow, you might want to add a media-query with special styles for smaller devices. PS - if my answer was the solution for your initial problem, I would appreciate an up-vote. - want to get past the 15 points ;-) – StilgarBF Mar 11 '12 at 16:12
Thanks for your help. But the scrollbar of the body is not working in small size of the browser. I have accepted your answer since it solved my original problem. I have forked another thread for the second one. – Tapas Bose Mar 11 '12 at 16:44

score 7 · Answer 2 · edited Feb 13 '20 at 10:31

7

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

edited Feb 13 '20 at 10:31

Hadrien K.

161
1
14

answered Aug 07 '12 at 17:49

Josh Valdivieso

1,168
1
14
22

1

`left: 25%` is missing a `;` – keanu_reeves Aug 18 '19 at 23:10

score 3 · Answer 3 · answered Mar 11 '12 at 15:47

3

#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/

answered Mar 11 '12 at 15:47

Greg

31,180
18
65
85

Thanks for help. it is now working but one problem in firefox there is no scrollbar while resizing but it is present in other browsers. I have updated my question. Please look at it. – Tapas Bose Mar 11 '12 at 15:55
http://jsfiddle.net/mAVd6/2/ does this basically reflect how your page is built? Does it produce scroll bars in Firefox? other browsers? - if you swap absolute with fixed what happens to the scroll bars?! – Greg Mar 11 '12 at 16:09
If I changed the position to absolute to fixed then no scrollbar appears in any browser. – Tapas Bose Mar 11 '12 at 16:15

Div horizontally center and vertically middle

3 Answers3

Linked