How can I center a div within another div?

Question

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>

what browsers are you testing on? Here's a fiddle with your code and it's working fine on the latest chrome : http://jsfiddle.net/mFwCp/ — gion_13, Mar 16 '13 at 22:36
Featured in [a YouTube video](https://www.youtube.com/watch?v=vT3GUKuAzIs&t=13s). — Peter Mortensen, Aug 13 '20 at 02:05
just set container div with `display: flex` and inner div with `margin: auto` and `position: relative` — Masciuniria, Jan 03 '21 at 01:17

score 160 · Accepted Answer · edited Jun 28 '21 at 15:04

160

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.

edited Jun 28 '21 at 15:04

Roy

7,811
4
24
47

answered Mar 13 '13 at 03:41

ShuklaSannidhya

8,572
9
32
45

28

This is not the solution. It only centers the container horizontally. Not vertically! – Jiri Vetyska Sep 20 '16 at 22:36
13

Using flex with `"justify-content: center; align-items: center;"` is another option – Smily Aug 19 '20 at 14:38
1

but you have to display: flex; if you want to use the solution mentioned directly above. – Goku Nov 06 '20 at 10:19

score 54 · Answer 2 · edited Aug 24 '20 at 16:21

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.

score 49 · Answer 3 · edited Aug 10 '21 at 04:35

49

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>

edited Aug 10 '21 at 04:35

Abhirajshri Winsome

165
1
13

answered Jun 17 '15 at 20:42

iraj jelodari

3,118
3
35
45

If you are using bootstrap, avoid defining class="container" or at least be aware that 'container' is a bootstrap css definition – Moondog 2112 Jun 22 '23 at 14:26

score 17 · Answer 4 · edited Aug 24 '20 at 15:54

17

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

edited Aug 24 '20 at 15:54

TylerH

20,799
66
75
101

answered Mar 22 '13 at 12:36

Zilberman Rafael

1,341
2
14
45

4

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... – Jiri Vetyska Sep 20 '16 at 22:29
@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. – TylerH Aug 24 '20 at 15:53

score 13 · Answer 5 · edited Aug 24 '20 at 16:13

13

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

edited Aug 24 '20 at 16:13

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 04:11

Rohit Azad Malik

31,410
17
69
97

It should be adding text-align: center to the container and display:inline-block to the child div or the main_content. – d.i.joe Jul 17 '19 at 04:13

score 12 · Answer 6 · edited Aug 24 '20 at 16:11

12

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.

edited Aug 24 '20 at 16:11

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 03:55

Arman P.

4,314
2
29
47

score 6 · Answer 7 · edited Aug 24 '20 at 15:41

6

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

edited Aug 24 '20 at 15:41

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 12:30

Sandeep Pattanaik

622
4
20

score 4 · Answer 8 · edited Aug 24 '20 at 16:09

4

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

edited Aug 24 '20 at 16:09

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 03:42

Jason Sears

429
1
7
18

score 4 · Answer 9 · edited Nov 01 '21 at 20:41

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.

score 4 · Answer 10 · edited Aug 24 '20 at 15:42

4

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

edited Aug 24 '20 at 15:42

Peter Mortensen

30,738
21
105
131

answered Mar 16 '13 at 13:41

Vish

169
3

score 4 · Answer 11 · edited Aug 24 '20 at 16:28

4

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

edited Aug 24 '20 at 16:28

Peter Mortensen

30,738
21
105
131

answered Mar 28 '16 at 15:06

chank

3,546
1
14
22

score 3 · Answer 12 · edited Aug 24 '20 at 16:11

3

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

edited Aug 24 '20 at 16:11

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 03:42

jhunlio

2,550
4
26
45

score 3 · Answer 13 · edited Aug 24 '20 at 16:14

3

Here is the solution:

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

edited Aug 24 '20 at 16:14

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 05:05

Atif Azad

527
1
4
15

score 3 · Answer 14 · edited Aug 24 '20 at 16:15

3

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

edited Aug 24 '20 at 16:15

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 06:10

Web Designer cum Promoter

1,334
14
26

score 3 · Answer 15 · edited Aug 24 '20 at 15:59

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

score 2 · Answer 16 · edited Aug 24 '20 at 15:41

2

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/

edited Aug 24 '20 at 15:41

Peter Mortensen

30,738
21
105
131

answered Mar 16 '13 at 11:54

btevfik

3,391
3
27
39

score 2 · Answer 17 · edited Aug 24 '20 at 16:27

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>

score 1 · Answer 18 · edited Aug 24 '20 at 15:28

1

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.

edited Aug 24 '20 at 15:28

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 03:42

Bogdan Rybak

2,107
1
19
22

score 1 · Answer 19 · edited Aug 24 '20 at 16:12

1

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 */
}

edited Aug 24 '20 at 16:12

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 03:55

New Developer

3,245
10
41
78

See the different what? – Peter Mortensen Aug 24 '20 at 15:34

score 1 · Answer 20 · edited Aug 24 '20 at 16:18

1

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/

edited Aug 24 '20 at 16:18

Peter Mortensen

30,738
21
105
131

answered Mar 16 '13 at 14:31

golchha21

314
3
10

score 1 · Answer 21 · edited Aug 24 '20 at 16:19

1

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

text-align: center;

to #main_content.

edited Aug 24 '20 at 16:19

Peter Mortensen

30,738
21
105
131

answered Mar 16 '13 at 22:29

LRA

1,057
13
18

This won't work with `position:relative;` - it'll center the content, sure, but not the div itself. – DACrosby Mar 22 '13 at 03:30

score 1 · Answer 22 · edited Aug 24 '20 at 15:45

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.

score 1 · Answer 23 · edited Aug 24 '20 at 16:20

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

edited Aug 24 '20 at 16:20

Peter Mortensen

30,738
21
105
131

answered Mar 18 '13 at 02:02

nexus_07

141
1
3

score 1 · Answer 24 · edited Aug 24 '20 at 16:22

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

score 1 · Answer 25 · edited Aug 24 '20 at 16:23

1

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:

edited Aug 24 '20 at 16:23

Peter Mortensen

30,738
21
105
131

answered Mar 22 '13 at 09:55

AndreaRivadossi

29
2

score 1 · Answer 26 · edited Aug 24 '20 at 16:25

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

score 1 · Answer 27 · edited Aug 27 '20 at 02:14

1

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

edited Aug 27 '20 at 02:14

Penny Liu

15,447
5
79
98

answered Feb 06 '18 at 09:01

Yarbrough lu

11
1

How can I center a div within another div?

27 Answers27

CSS

HTML

HTML

CSS

How?

Linked

Related