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

Answer 1

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 2

You must assign a width to the div you want to center.

Like this:

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

More information and examples on these links:

• CSS Layout - Horizontal & Vertical Align

• http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

Answer 3

To make a div in center. There isn't any need to assign the width of the div.

A working demo is here:

http://jsfiddle.net/6yukdmwq/

    .container {
        width: 100%;
        height: 500px;
        display: table;
        border: 1px solid red;
        text-align: center;}

    .center {
        display: table-cell;
        vertical-align: middle;
    }

    .content {
        display: inline-block;
        text-align: center;
        border: 1px solid green;
    }

    <section class="container">
        <div class="center">
            <div class="content">
                <h1>Helllo Center Text</h1>
            </div>
        </div>
    </section>

Answer 4

Try to add

text-align: center;

to your parent container CSS declaration. And the following to the child container:

display: inline-block;

It must do the trick.

Answer 5

Make the CSS content this way...

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

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 10px;
}

A working example is here: http://jsfiddle.net/golchha21/mjT7t/

Answer 6

If you don't want to set a width for #container, just add

text-align: center;

to #main_content.