How can I center a div within another div? [duplic

Question

This question already has answers here:

How to horizontally center a <div>? (104 answers)

Closed 2 years ago.

I've got an problem. I have the html code like this:

<div id="main_content" >
    <div id="container">
    </div>
</div>

The css like this:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

I suppose that the #container will be centered within #main_content. However, it is not. I just want to find out the reason and how to make it centered.

Answer 1

.parent {
width:500px;
height:200px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
}
#kid {
width:70%; /* 70% of the parent*/
margin:auto;
border:2px solid #f00;
height: 70%;
}

This does solve the problem very well (tested in all new browsers), where the parent div has class="parent" and the child div has id="kid"

That style centers both horizontally and vertically. Vertical center can only be done using complicated tricks--or by making the parent div function as a table-cell, which is one of the only elements in HTML that properly supports vertical alignment. Simply set the height of the kid, margin auto, and middle vertical alignment, and it will work. It's the easiest solution that I know.

Answer 2

You can center float div with this little code:

#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;

margin-top: -100px;
margin-left: -100px;
}

Answer 3

everyone said it but i guess it won't hurt saying again. you need to set the width to some value. here is something simpler to understand.

http://jsfiddle.net/XUxEC/

Answer 4

It is because your width is set to auto. You have to specify the width for it to be visibly centered. Your #container spans the whole width of the #main_content. That's why it seems not centered,

Answer 5

try this one if this is the output you want:

<div id="main_content" >
<div id="container">
</div>
</div>

#main_content {
background-color: #2185C5;
margin: 0 auto;
}

#container {
width: 100px;
height: auto;
margin: 0 auto;
padding: 10px;
background: red;
}

Answer 6

You need to set the width of the container. (auto won't work)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - StackOverflow

Update - In action @ jsFiddle