How can I center a div inside another div?

Question

I have a problem. I have html code:

<div id="main_content" > <div id="container"> </div> </div> 

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 believe that the # container will be centered in #main_content. However, it is not. I just want to find out the reason and how to focus it.

Answer 1

You need to set the width of the container. ( auto will not work)

 #container { width: 640px; /*can be in percentage also.*/ height: auto; margin: 0 auto; padding: 10px; position: relative; } 

The CSS MDN link explains all this.

Check out these links.

• auto link CSS | MDN
• margin - CSS link | MDN
• stack overflow

Update - in action @ jsFiddle

Answer 2

Technically, your internal DIV ( #container ) located horizontally. The reason you can't say that is because the CSS width: auto property expands the internal DIV to the same width as its parent.

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

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

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

I think the real question is: "How to align elements horizontally using CSS?" and the answer (drum roll please): it depends!

I will not completely rethink the many ways to focus on 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 just specify what you want width and set the left and right margins to auto .

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

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

Answer 3

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> 

Answer 4

Now just define your

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

as shown

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

Answer 5

You can center the float div with this little code:

 #div { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; } 

Answer 6

it would work by providing the width of the div #container: 80% [any width is less than the main content and is specified in%, so it is well controlled both on the left and on the right) and gives margin: 0px auto; OR margin: 0 auto; [both works great].

Answer 7

I would try to define a more specific width for starters. It’s hard to focus on something that already spans the entire width:

 #container { width: 400px; } 

Answer 8

Try to add

 text-align: center; 

into your parent css container declaration. And the following for the child container:

 display: inline-block; 

He has to do the trick.

Answer 9

here is the solution

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

Answer 10

 #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 to check it out. live check on jsfiddle

Answer 11

Maybe you want something like this: demo

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 vertically aligned cell, the cell with the middle will be vertically centered on the element, and text-align: center; works like horizontal alignment to an element. Noticed why #container is in inline-block coz, it is in line state. Any question?

Answer 12

try to get position:relative; in you #container , add the exact width in #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; } 

demo works

Answer 13

Here's a new way to easily center your div with a flexible display.

See this working script: 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; } 

Answer 14

This is because your width is set to auto. You must specify the width so that it is clearly centered. Your #container spans the entire width of #main_content. That’s why it seems not centered,

Answer 15

Without setting Width it will get the maximum width it can get. Thus, you cannot see that the center of the Div centered.

 #container { width: 50%; height: auto; margin: auto; padding: 10px; position: relative; background-color:black; /* Just to see the different*/ } 

Answer 16

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

Answer 17

everyone said it, but I think it won’t hurt, speaking again. you need to set the width value to some value. here is something easier to understand.

http://jsfiddle.net/XUxEC/

Answer 18

Make css 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 19

if you don't want to set the width for #container just add

 text-align: center; 

to #main_content

Answer 20

If you set width: auto to a block element, the width will be 100%. Thus, here the value auto does not really matter. Actually the same for height, because by default any element is set to automatic height.

So your div#container actually centered, but it just takes up the entire width of its parent element. You do the alignment on the right, you just need to change the width (if necessary) to see that it is really centered. If you want to center your #main_content, just apply margin: 0 auto; to him.

Answer 21

try this if this is what 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 22

This works fine, I think, although you may 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; } 

Answer 23

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

Like this:

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

Additional information and examples at these links:

http://www.w3schools.com/css/css_align.asp

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

Answer 24

 .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 solves the problem very well (tested in all new browsers) where the parent div has class = "parent" and the child div has id = "kid"

This style is centered both horizontally and vertically. A vertical center can only be accomplished with complex tricks - or by creating a parent div function as a cell table, which is one of the only HTML elements that correctly supports vertical alignment. Just set your baby’s height, auto margin and average vertical orientation, and it will work. This is the easiest solution I know.

Answer 25

I used the following method in several projects

https://jsfiddle.net/u3Ln0hm4/

 .cellcenterparent{ width: 100%; height: 100%; display: table; } .cellcentercontent{ display: table-cell; vertical-align: middle; text-align: center; } 

Answer 26

to make a div in the center. no need to assign div width.

working demo 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>