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   x000D   x000D   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    x000D   lt div id  main content  gt     lt div id  container  gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   CSS Layout - Horizontal  amp  Vertical Align  http   www w3schools com css tryit asp filename trycss align container

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   auto - CSS reference   MDN margin - CSS reference   MDN What is the meaning of auto value in a CSS property - Stack Overflow  In action at jsFiddle

User · Answer

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              lt section class  quot container quot  gt           lt div class  quot center quot  gt               lt div class  quot content quot  gt                   lt h1 gt Helllo Center Text lt  h1 gt               lt  div gt           lt  div gt       lt  section gt

User · Answer

Here is the solution   main content       background-color   2185C5      height  auto      margin  0 auto      min-height  500px      position  relative      width  800px

User · Answer

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

User · Answer

Try this one if this is the output you want   lt div id  quot main content quot   gt       lt div id  quot container quot  gt       lt  div gt   lt  div gt    main content       background-color   2185C5      margin  0 auto      container       width  100px      height  auto      margin  0 auto      padding  10px      background  red

User · Answer

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

User · Answer

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  quot parent quot  and the child div has id  quot kid quot   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

If you don t want to set a width for  container  just add text-align  center   to  main content

User · Answer

This will work fine I think  though you might need to reset  quot top 200px  quot  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

User · Answer

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

User · Answer

Maybe you want as this  Demo HTML  lt div id  quot main content quot  gt       lt div id  quot container quot  gt vertical aligned text lt br   gt some more text here      lt  div gt   lt  div gt   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

User · Answer

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

User · Answer

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

User · Answer

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      lt div class  quot container quot  gt           lt div class  quot centered-div quot  gt               lt b gt Enjoy lt  b gt           lt  div gt       lt  div gt

User · Answer

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

User · Answer

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  quot How do I center elements horizontally with CSS  quot  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

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

Examples related to html

Examples related to css