Centering inside a div

Question

Possible Duplicate:
How to center a div in a div?

I have a big DIV that has a width and height of of 100% so it takes up the whole browser. I also have a another DIV inside that with a width of 1024px and a height of 400px. I was wondering what the best method of centering the div both horizontally and vertically would be? I also want it to stay in the center when the browser is resized. Is there a jQuery plugin, some handy javascript or can I do this simply using CSS.

The Markup

.bigdiv{
height:100%;
width:100%;
background-color:#eee;
}
.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
}

<div class="bigdiv">
<div class="smalldiv"></div>
</div>

Thanks for any help and advice!

This question has been answered many times. Try searching in Stack Overflow. The key is `position: absolute`, `margin-left: -width/2`, `margin-top: -height/2`, and container with `position: relative`. — elclanrs, Nov 09 '12 at 05:56

score 0 · Answer 1 · answered Nov 09 '12 at 05:58

0

try using, margin:0 auto;

.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
margin:0 auto;
}

answered Nov 09 '12 at 05:58

Swarne27

5,521
7
26
41

score 0 · Answer 2 · answered Nov 09 '12 at 05:59

0

You can easily give the margin:auto; to you child div for your desired results

HTML

<div class="bigdiv">
<div class="smalldiv"></div>
</div>

CSS

 .bigdiv{
    height:100%;
    width:100%;
    background-color:#eee;
    }
    .smalldiv{
    height:400px;
    width:1024px;
    background-color:#ccc;
    margin:auto;
    }

DEMO

answered Nov 09 '12 at 05:59

Shailender Arora

7,674
2
31
35

you also have to add html{height:100%;}body{height:100%;} to the css. but it does not work because margin auto does not work on the vertical. Use the one i posted below. – Matt Rogers Nov 09 '12 at 06:23

score 0 · Accepted Answer · answered Nov 09 '12 at 06:20

Okay so this is how to get it to center.

.bigdiv{
height:100%;
width:100%;
background-color:#eee;
position:relative;
}
.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
position:absolute;
left:50%;
top:50%;
margin-left:512px;
margin-top:200px;
}

<div class="bigdiv">
<div class="smalldiv"></div>
</div>

score -1 · Answer 4 · edited Nov 09 '12 at 06:01

-1

use text-align:center in your larger div and margin:0 auto in your inner div

edited Nov 09 '12 at 06:01

Pragnesh Chauhan

8,363
9
42
53

answered Nov 09 '12 at 05:56

Ohad Milchgrub

122
6

Centering inside a div

4 Answers4