How can I center a div within another div? [duplicate]

Answer 1

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 2

Without setting the width, it will get the maximum width it can get. So you cannot see that the div has centered.

#container
{
    width: 50%;
    height: auto;
    margin: auto;
    padding: 10px;
    position: relative;
    background-color: black;  /* Just to see the different */
}

Answer 3

Here is a new way to easily center your div using Flexbox display.

See this working fiddle: https://jsfiddle.net/5u0y5qL2/

Here is the CSS:

.layout-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.layout-align-center-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

Answer 4

Here is the solution:

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

Answer 5

Everyone said it, but I guess it won't hurt saying it again.

You need to set the width to some value. Here is something simpler to understand.

http://jsfiddle.net/XUxEC/

Answer 6

Use margin:0 auto; to the child div. Then you can center the child div inside the parent div.