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

Answer 1

I have used the following method in a few projects:

https://jsfiddle.net/u3Ln0hm4/

.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

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

Answer 2

I would try defining a more specific width, for starters. It's hard to center something that already spans the entire width:

#container {
    width: 400px;
}

Answer 3

If you set width: auto to a block element, then the width would be 100%. So it really doesn't make much sense to have the auto value here. It is 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 occupies the whole width of its parent element. You do the centering right, and 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 4

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

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

Try this. It tested OK. There is a live check on jsfiddle.

Answer 5

.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 6

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;
}