Mends.One

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

Css, Html

I suppose that the #container will be centered within #main_content. However, it is not. Why isn't this working, and how can I fix it?

#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;
}
<div id="main_content">
  <div id="container">
  </div>
</div>

203
U
user2142709
Jump to: Answer 1 Answer 2 Answer 3 Answer 4 Answer 5 Answer 6 Answer 7 Answer 8 Answer 9 Answer 10 Answer 11 Answer 12 Answer 13 Answer 14 Answer 15 Answer 16 Answer 17 Answer 18 Answer 19 Answer 20 Answer 21 Answer 22 Answer 23 Answer 24 Answer 25 Answer 26 Answer 27

Answers (27)

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:

In action at jsFiddle.

160
S
ShuklaSannidhya

Comments:

Jiri Vetyska said:
This is not the solution. It only centers the container horizontally. Not vertically!
Smily said:
Using flex with "justify-content: center; align-items: center;" is another option
Goku said:
but you have to display: flex; if you want to use the solution mentioned directly above.

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.

54
J
Jeremiah

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>
49
I
iraj jelodari

Comments:

Moondog 2112 said:
If you are using bootstrap, avoid defining class="container" or at least be aware that 'container' is a bootstrap css definition

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;
}
17
Z
Zilberman Rafael

Comments:

Jiri Vetyska said:
This is actually the only correct solution. All the other barely center the inner div horizontally. This is how you center the inner div also vertically. The only correction: position: absolute; // not display...
TylerH said:
@PeterMortensen I disagree with this edit; I believe the author meant 'center float' as in simply 'center' a div in a way that floats, rather than centering a div that has float properties already assigned. Although more importantly, answers on this question shouldn't be getting edited at all, really.

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;
}
13
R
Rohit Azad Malik

Comments:

d.i.joe said:
It should be adding text-align: center to the container and display:inline-block to the child div or the main_content.

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.

12
A
Arman P.

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

6
S
Sandeep Pattanaik

It would work giving the #container div width:80% (any width less than the main content and have given in %, so that it manages well from both left and right) and giving margin:0px auto; or margin:0 auto; (both work fine).

4
V
Vish

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;
}
4
J
Jason Sears

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;
}
4
C
chank

Maybe you want as this:

HTML

<div id="main_content">
    <div id="container">vertical aligned text<br />some more text here
    </div>
</div>

CSS

#main_content {
    width: 500px;
    height: 500px;
    background: #2185C5;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#container{
    width: auto;
    height: auto;
    background: white;
    display: inline-block;
    padding: 10px;
}

How?

In a table cell, vertical align with middle will set to vertically centered to the element and text-align: center; works as horizontal alignment to the element.

Noticed why is #container is in inline-block because this is in the condition of the row.

4
B
Bhojendra Rauniyar

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;
}
3
Y
Yann Thibodeau

Try to get the position:relative; in your #container. Add an 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

3
J
jhunlio

Here is the solution:

#main_content {
    background-color: #2185C5;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    position: relative;
    width: 800px;
}
3
A
Atif Azad 
#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.

3
W
Web Designer cum Promoter

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/

2
B
btevfik

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>
2
T
Tauphik Ahamad

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.

1
B
Bogdan Rybak

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.

1
P
pzin

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 */
}
1
N
New Developer

Comments:

Peter Mortensen said:
See the different what?

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/

1
G
golchha21

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

text-align: center;

to #main_content.

1
L
LRA

Comments:

DACrosby said:
This won't work with position:relative; - it'll center the content, sure, but not the div itself.

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;
}
1
N
nexus_07

This will work fine I think, though you might need to reset "top:200px;" according to your needs:

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

#container {
    width: 100px;
    height: 20px;;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
    top: 200px;
    border: 2px solid #CCCCCC;
}
1
P
Praveen Dabral 
.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.

1
J
Joseph Myers 
* {
  box-sizing: border-box;
}

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

#container {
  width: 50%;
  height: 50%;
  margin: auto;
  padding: 10px;
  position: absolute;
  border: 5px solid yellow;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
1
Y
Yarbrough lu

Related Questions