How to center a div within a div

Question

I have one div of class 'outerpiccontainer' which contains another div 'pic container' inside of it. The inner div is currently empty and just has some styling applied to it, it is 80% height and width of the outer div.

Currently I am able to center the inner div by using a left margin of 10% (10+10+80 =100). However I am not happy with this solution (if I change the size ratio between divs I will lose my center). Is there a way or property to center a div within a div?

Thanks in advance! I have the html portion followed by css below.

<section class="outerpiccontainer"> 
    <p>Place photo here</p> 
    <div class="piccontainer"></div>
</section>

.outerpiccontainer 
{
    background-color:#BF1432;
    width:38%;
    height:400px;
    padding:1%;
    border-top:5px inset #DCDCDC;
    border-bottom:5px inset #DCDCDC;
    border-bottom-left-radius: 8%;
    float:left
}

.piccontainer 
{
    background-color:#DCDCDC;
    width:80%;
    height:80%;
    padding:1%;
    border-radius: 50%;
   -moz-box-shadow: 10px 10px 5px black;
   -webkit-box-shadow: 10px 10px 5px black;
    box-shadow: 10px 10px 5px black;
    margin-left: 10%;
    float:left; 
}

Horizontal centering is usually done with margin: 0 auto; Have you tried it? — Huangism, Feb 10 '14 at 21:27
thank you for your help everyone. As most replies pointed out the issue was with the float left. @JohnRiselvato, I now see how these might be duplicates. I came across these before posting, but it wasn't until peoples feedback regarding the float left that I understood the issue. Be patient, if I was advanced as others I wouldn't be asking for help. — JMariña, Feb 10 '14 at 21:48

score 1 · Accepted Answer · answered Feb 10 '14 at 21:29

1

Centering horizontally using margin auto

http://jsfiddle.net/zMrN7/

.piccontainer 
{
    background-color:#DCDCDC;
    width:80%;
    height:80%;
    padding:1% 0;
    border-radius: 50%;
   -moz-box-shadow: 10px 10px 5px black;
   -webkit-box-shadow: 10px 10px 5px black;
    box-shadow: 10px 10px 5px black;
    margin: 0 auto;
}

answered Feb 10 '14 at 21:29

Huangism

16,278
7
48
74

Very clean answer, I had tried Margin auto, but still had the float in place. With the float removed I got the desired result. Thank you. – JMariña Feb 10 '14 at 21:56

score 0 · Answer 2 · answered Feb 10 '14 at 21:29

0

Instead of using floats, you can set the inner div to display: inline-block. Then, you can use text-align: center on the container div. See this jsfiddle: http://jsfiddle.net/xrrf4/

answered Feb 10 '14 at 21:29

Anid Monsur

4,538
1
17
24

score 0 · Answer 3 · answered Feb 10 '14 at 21:33

Try to use relative positioning and absolute for your child element:

.parent-container {
  position: relative;
}

.child-center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

good link on centering http://codepen.io/shshaw/full/gEiDt

How to center a div within a div

3 Answers3