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

try to get the position:relative;in you #container, add exact width to #container

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

#container {
    width:600px;
    height: auto;
    margin:auto;
    padding: 10px;
}

working demo

Answer 2

Technically, your inner DIV (#container) is centered horizontally. The reason you can't tell is because with the CSS width: auto property the inner DIV is expanding to the same width as its parent.

See this fiddle: http://jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

In this example, I simply set the width of #container to 50px and set the background to red so that you can see that it is centered.

I think the real question is "How do I center elements horizontally with CSS?" and the answer is (drum roll please): it depends!

I won't do a full rehash of the myriad ways to center things with CSS when W3Schools does it so nicely here: http://www.w3schools.com/css/css_align.asp but the basic idea is that for block level elements you simply specify the desired width and set the left and right margins to auto.

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
 }

Please note: This answer only applies to BLOCK level elements! To position an INLINE element, you will need to use the text-align: center property on the first BLOCK parent.

Answer 3

Now just define your

#main_content text-align:center and define your #container display:inline-block;

as like this

#main_content{
text-align:center;
}
#container{
display:inline-block;
vertical-align:top;
}

Answer 4

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

Answer 5

If you set width: auto to a block element, then the width would be 100%. So it really doesn't make much sense the auto value here. Really the same for height, because by default any element is set to an automatic height.

So finally your div#container is actually centered but it just occupy the whole width of its parent element. You do the centering right, you need just to change the width (if needed) to see that it is really centered. If you want to center your #main_content then just apply margin: 0 auto; on it.

Answer 6

Another interesting way: fiddle

css

.container{
    background:yellow;
    width: %100;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.centered-div{
    width: 80%;
    height: 190px;
    margin: 10px;
    padding:5px;
    background:blue;
    color:white;
}

html

<div class="container">
    <div class="centered-div">
        <b>Enjoy</b>
    </div>
</div>