How to center a div within another div

Question

I have these two divs and would like to center the one in the other. Any help would be appreciated.

<div class="PicturesBackground" style="height:350px; width: 100%; background: green; border-radius:15px;">
<div class="ContentArea" style="height:80%; width:90%; background: blue; margin-top:30px"></div></div>

I have tried using margins and padding and it puts margins/padding on the entire thing instead of just the ContentArea Div within th the background div.

Hi Kevin, please always remember to Google first. `How to center a div within another div` gives plenty of good answers, including [this](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) highly upvoted Stack Overflow question. Thanks! — Pekka, May 14 '13 at 14:47
possible duplicate of [How to center div within another div?](http://stackoverflow.com/questions/11924553/how-to-center-div-within-another-div) — Lowkase, May 14 '13 at 14:48

score 0 · Accepted Answer · answered May 14 '13 at 14:48

0

what about this :

.ContentArea{
    margin-left: auto;
    margin-right: auto;
}

answered May 14 '13 at 14:48

gion_13

41,171
10
96
108

That centered it horizontally how would I center the box vertically as well? margin-top:auto; and margin-right:auto; doesn't change anything. – ThatOneGuy May 14 '13 at 14:55

score -1 · Answer 2 · answered May 14 '13 at 14:50

-1

Try this:

margin: 30px auto;

Hope this helps!

answered May 14 '13 at 14:50

cortex

5,036
3
31
41

How to center a div within another div

2 Answers2