Centering a div block without the width

Question

I have a problem when I try to center the div block  products  because I don t know in advance the div width   Anybody have a solution   Update  The problem I have is I don t know how many products I ll display  I can have 1  2 or 3 products  I can center them if it was a fixed number as I d know the width of the parent div  I just don t know how to do it when the content is dynamic    x000D   x000D   product container   x000D    text-align  center  x000D    height  150px  x000D    x000D   x000D   products   x000D    height  140px  x000D    text-align  center  x000D    margin  0 auto  x000D    clear  ccc both   x000D    x000D   price   x000D    margin  6px 2px  x000D    width  137px  x000D    color   666  x000D    font-size  14pt  x000D    font-style  normal  x000D    border  1px solid  CCC  x000D    background-color   EFEFEF  x000D    x000D   lt div class  product container  gt  x000D     lt div class  products  id  products  gt  x000D       lt div id  product 15  gt  x000D         lt img src   images ecommerce card default png  gt  x000D         lt div class  price  gt R  0 01 lt  div gt  x000D       lt  div gt  x000D   x000D       lt div id  product 15  gt  x000D         lt img src   images ecommerce card default png  gt  x000D         lt div class  price  gt R  0 01 lt  div gt  x000D       lt  div gt     x000D   x000D       lt div id  product 15  gt  x000D         lt img src   images ecommerce card default png  gt  x000D         lt div class  price  gt R  0 01 lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try this new css and markup

Here is modified HTML:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

And here is modified CSS:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

User · Answer

This will center an element such as an Ordered List  or Unordered List  or any element  Just wrap it with a Div with the class of outerElement and give the inner element the class of innerElement    The outerelement class accounts for IE  old Mozilla  and most newer browsers        outerElement           display  -moz-inline-stack          display  inline-block          vertical-align  middle          zoom  1          position  relative          left  50           innerElement       position  relative      left  -50

User · Answer

Slight variation on Mike M  Lin s answer  If you add overflow  auto    or hidden   to div product container  then you don t need div clear   This is derived from this article -  http   www quirksmode org css clearing html  Here is modified HTML    lt div class  product container  gt       lt div class  outer-center  gt           lt div class  product inner-center  gt           lt  div gt       lt  div gt   lt  div gt    And here is modified CSS    product container     overflow  auto       width property only required if you want to support IE6      width  100       outer-center     float  right    right  50     position  relative      inner-center     float  right    right  -50     position  relative      The reason  why it s better without div clear  apart that it feels wrong to have an empty element  is Firefox es overzealous margin assignment   If  for example  you have this html    lt div class  product container  gt       lt div class  outer-center  gt           lt div class  product inner-center  gt           lt  div gt       lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  div gt   lt p style  margin-top  11px   gt Some text lt  p gt    then  in Firefox  8 0 at the point of writing   you will see 11px margin before product container   What s worse  is that you will get a vertical scroll bar for the whole page  even if the content fits nicely into the screen dimensions

User · Answer

Do display table  and set margin to auto  Important bit of code    relatedProducts       display  table      margin-left  auto      margin-right  auto      No matter how many elements you got now it will auto align in center  Example in code snippet    x000D   x000D   relatedProducts   x000D      display  table  x000D      margin-left  auto  x000D      margin-right  auto  x000D    x000D  a   x000D    text-decoration none  x000D    x000D   lt div class  row relatedProducts  gt  x000D   lt div class  homeContentTitle  style  margin  100px auto 35px  width  250px  gt Similar Products lt  div gt  x000D        x000D   lt a href     gt test1  lt  a gt  x000D   lt a href     gt test2  lt  a gt  x000D   lt a href     gt test3  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

six ways to skin that cat     Button one  anything of type display  block will assume the full parents width   unless combined with float or a display  flex parent   True  Bad example   Button 2  going for display  inline-block will lead to automatic  rather than full  width  You can then center using text-align  center on the wrapping block  Probably the easiest  and most widely compatible  even with    vintage    browsers      wrapTwo   text-align  center   two   display  inline-block     instantly shrinks width   Button 3  No need to put anything on the wrap  So perhaps this is the most elegant solution  Also works vertically   Browser support for transtlate is good enough   IE9  these days       position  relative  display  inline-block     instantly shrinks width left  50   transform  translateX -50      Btw  Also a great way for vertically centering blocks of unknown height  in connection with absolute positioning    Button 4  Absolute positioning  Just make sure to reserve enough height in the wrapper  since noone else will  neither clearfix nor implicit       four   position absolute   top 0   left 50    transform translateX -50    wrapFour   position relative    otherwise  absolute positioning will be relative to page    height 50px    ensure height   background lightgreen    just a marker   Button 5  float  which brings also block-level elements to dynamic width  and a relative shift  Although I ve never seen this in the wild  Perhaps there are disadvantages      wrapFive    amp  after    aka  clearfix      content        display table     clear both   five     float left   position relative   left 50    transform translateX -50     Update  Button 6  And nowadays  you could also use flex-box  Note  that styles apply to the wrapper of the centered object    wrapSix   display  flex   justify-content  center     full source code  stylus syntax

User · Answer

six ways to skin that cat     Button one  anything of type display  block will assume the full parents width   unless combined with float or a display  flex parent   True  Bad example   Button 2  going for display  inline-block will lead to automatic  rather than full  width  You can then center using text-align  center on the wrapping block  Probably the easiest  and most widely compatible  even with    vintage    browsers      wrapTwo   text-align  center   two   display  inline-block     instantly shrinks width   Button 3  No need to put anything on the wrap  So perhaps this is the most elegant solution  Also works vertically   Browser support for transtlate is good enough   IE9  these days       position  relative  display  inline-block     instantly shrinks width left  50   transform  translateX -50      Btw  Also a great way for vertically centering blocks of unknown height  in connection with absolute positioning    Button 4  Absolute positioning  Just make sure to reserve enough height in the wrapper  since noone else will  neither clearfix nor implicit       four   position absolute   top 0   left 50    transform translateX -50    wrapFour   position relative    otherwise  absolute positioning will be relative to page    height 50px    ensure height   background lightgreen    just a marker   Button 5  float  which brings also block-level elements to dynamic width  and a relative shift  Although I ve never seen this in the wild  Perhaps there are disadvantages      wrapFive    amp  after    aka  clearfix      content        display table     clear both   five     float left   position relative   left 50    transform translateX -50     Update  Button 6  And nowadays  you could also use flex-box  Note  that styles apply to the wrapper of the centered object    wrapSix   display  flex   justify-content  center     full source code  stylus syntax

User · Answer

use css3 flexbox with  justify-content center        lt div class  row  gt            lt div class  col  style  background red   gt content1 lt  div gt             lt div class  col  style    gt content2 lt  div gt       lt  div gt     row       display  flex     equal height of the children        height 100px      border 1px solid red      width  400px      justify-content center

User · Answer

Crappy fix  but it does work     CSS    mainContent       position absolute      width 600px      background  FFFF99      sidebar       float left      margin-left 610px      max-width 300      background  FFCCCC     sidebar        text-align center      HTML    lt center gt   lt table border  0  cellspacing  0  gt     lt tr gt       lt td gt   lt div id  mainContent  gt  1 lt br  gt   lt br  gt  123 lt br  gt  123 lt br  gt  123 lt br  gt   lt  div gt  lt div id  sidebar  gt  lt br  gt   lt  div gt  lt  td gt   lt  tr gt   lt  table gt   lt  center gt

User · Answer

Slight variation on Mike M  Lin s answer  If you add overflow  auto    or hidden   to div product container  then you don t need div clear   This is derived from this article -  http   www quirksmode org css clearing html  Here is modified HTML    lt div class  product container  gt       lt div class  outer-center  gt           lt div class  product inner-center  gt           lt  div gt       lt  div gt   lt  div gt    And here is modified CSS    product container     overflow  auto       width property only required if you want to support IE6      width  100       outer-center     float  right    right  50     position  relative      inner-center     float  right    right  -50     position  relative      The reason  why it s better without div clear  apart that it feels wrong to have an empty element  is Firefox es overzealous margin assignment   If  for example  you have this html    lt div class  product container  gt       lt div class  outer-center  gt           lt div class  product inner-center  gt           lt  div gt       lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  div gt   lt p style  margin-top  11px   gt Some text lt  p gt    then  in Firefox  8 0 at the point of writing   you will see 11px margin before product container   What s worse  is that you will get a vertical scroll bar for the whole page  even if the content fits nicely into the screen dimensions

User · Answer

An element with    display  block     as div is by default  has a width determined by the width of its container  You can t make a block s width dependent on the width of its contents  shrink-to-fit     Except for blocks that are    float  left right    in CSS 2 1  but that s no use for centering    You could set the    display    property to    inline-block    to turn a block into a shrink-to-fit object that can be controlled by its parent s text-align property  but browser support is spotty  You can mostly get away with it by using hacks  eg  see -moz-inline-stack  if you want to go that way   The other way to go is tables  This can be necessary when you have columns whose width really can t be known in advance  I can t really tell what you re trying to do from the example code     there s nothing obvious in there that would need a shrink-to-fit block     but a list of products could possibly be considered tabular    PS  never use    pt    for font sizes on the web     px    is more reliable if you really need fixed size text  otherwise relative units like         are better  And    clear  ccc both        a typo     center     text-align center       center  gt  div     N B  child combinators don t work in IE6 or less       display inline-block      JSFiddle

User · Answer

I m afraid the only way to do this without explicitly specifying the width is to use  gasp  tables

User · Answer

I m afraid the only way to do this without explicitly specifying the width is to use  gasp  tables

User · Answer

Most browsers support the display  table  CSS rule  This is a good trick to center a div in a container without adding extra HTML nor applying constraining styles to the container  like text-align  center  which would center all other inline content in the container   while keeping dynamic width for the contained div   HTML    lt div class  container  gt     lt div class  centered  gt This content is centered lt  div gt   lt  div gt    CSS    centered   display  table  margin  0 auto       x000D   x000D   container   x000D    background-color  green  x000D    x000D   centered   x000D    display  table  x000D    margin  0 auto  x000D    background-color  red  x000D    x000D   lt div class  container  gt  x000D     lt div class  centered  gt This content is centered lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Update  2015-03-09    The proper way to do this today is actually to use flexbox rules  Browser support is a little bit more restricted  CSS table support vs flexbox support  but this method also allows many other things  and is a dedicated CSS rule for this type of behavior   HTML    lt div class  container  gt     lt div class  centered  gt This content is centered lt  div gt   lt  div gt    CSS    container     display  flex    flex-direction  column     put this if you want to stack elements vertically       centered   margin  0 auto       x000D   x000D   container   x000D    display  flex  x000D    flex-direction  column     put this if you want to stack elements vertically    x000D    background-color  green  x000D    x000D   centered   x000D    margin  0 auto  x000D    background-color  red  x000D    x000D   lt div class  container  gt  x000D     lt div class  centered  gt This content is centered lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Simple fix that works in old browsers  but does use tables  and requires a height to be set     lt div style  width 100  height 40px position absolute top 50  margin-top -20px   gt     lt table style  width 100   gt  lt tr gt  lt td align  center  gt      In the middle    lt  td gt  lt  tr gt  lt  table gt   lt  div gt

User · Answer

An element with    display  block     as div is by default  has a width determined by the width of its container  You can t make a block s width dependent on the width of its contents  shrink-to-fit     Except for blocks that are    float  left right    in CSS 2 1  but that s no use for centering    You could set the    display    property to    inline-block    to turn a block into a shrink-to-fit object that can be controlled by its parent s text-align property  but browser support is spotty  You can mostly get away with it by using hacks  eg  see -moz-inline-stack  if you want to go that way   The other way to go is tables  This can be necessary when you have columns whose width really can t be known in advance  I can t really tell what you re trying to do from the example code     there s nothing obvious in there that would need a shrink-to-fit block     but a list of products could possibly be considered tabular    PS  never use    pt    for font sizes on the web     px    is more reliable if you really need fixed size text  otherwise relative units like         are better  And    clear  ccc both        a typo     center     text-align center       center  gt  div     N B  child combinators don t work in IE6 or less       display inline-block      JSFiddle

User · Answer

I found interesting solution  I was making slider and had to center slide controls and I did this and works fine  You can also add relative position to parent and move child position vertical  Take a look http   jsfiddle net bergb 6DvJz   CSS    parent          width 600px          height 400px          background  ffcc00          text-align center          child          display inline-block          margin 0 auto          background  fff            HTML    lt div id  parent  gt       lt div id  child  gt voila lt  div gt   lt  div gt

User · Answer

lt div class  product container  gt   lt div class  outer-center  gt   lt div class  product inner-center  gt       lt  div gt   lt  div gt   lt div class  clear  gt  lt  div gt   lt  div gt    outer-center   float  right  right  50   position  relative     inner-center    float  right  right  -50   position  relative     clear    clear  both      product container   overflow hidden      If you dont provide  overflow hidden  for   product container    the  outer-center  div will overlap other nearby contents to the right of it  Any links or buttons to the right of  outer-center  wont work  Try background color for  outer-center  to understand the need of  overflow  hidden

User · Answer

An element with    display  block     as div is by default  has a width determined by the width of its container  You can t make a block s width dependent on the width of its contents  shrink-to-fit     Except for blocks that are    float  left right    in CSS 2 1  but that s no use for centering    You could set the    display    property to    inline-block    to turn a block into a shrink-to-fit object that can be controlled by its parent s text-align property  but browser support is spotty  You can mostly get away with it by using hacks  eg  see -moz-inline-stack  if you want to go that way   The other way to go is tables  This can be necessary when you have columns whose width really can t be known in advance  I can t really tell what you re trying to do from the example code     there s nothing obvious in there that would need a shrink-to-fit block     but a list of products could possibly be considered tabular    PS  never use    pt    for font sizes on the web     px    is more reliable if you really need fixed size text  otherwise relative units like         are better  And    clear  ccc both        a typo     center     text-align center       center  gt  div     N B  child combinators don t work in IE6 or less       display inline-block      JSFiddle

User · Answer

I m afraid the only way to do this without explicitly specifying the width is to use  gasp  tables

User · Answer

lt style type  text css  gt   container box      text-align center    content      padding 10px      background  ff0000      color  ffffff           use span istead of the inner divs   lt div class  container box  gt      lt span class  content  gt Hello lt  span gt   lt  div gt

User · Answer

Most browsers support the display  table  CSS rule  This is a good trick to center a div in a container without adding extra HTML nor applying constraining styles to the container  like text-align  center  which would center all other inline content in the container   while keeping dynamic width for the contained div   HTML    lt div class  container  gt     lt div class  centered  gt This content is centered lt  div gt   lt  div gt    CSS    centered   display  table  margin  0 auto       x000D   x000D   container   x000D    background-color  green  x000D    x000D   centered   x000D    display  table  x000D    margin  0 auto  x000D    background-color  red  x000D    x000D   lt div class  container  gt  x000D     lt div class  centered  gt This content is centered lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Update  2015-03-09    The proper way to do this today is actually to use flexbox rules  Browser support is a little bit more restricted  CSS table support vs flexbox support  but this method also allows many other things  and is a dedicated CSS rule for this type of behavior   HTML    lt div class  container  gt     lt div class  centered  gt This content is centered lt  div gt   lt  div gt    CSS    container     display  flex    flex-direction  column     put this if you want to stack elements vertically       centered   margin  0 auto       x000D   x000D   container   x000D    display  flex  x000D    flex-direction  column     put this if you want to stack elements vertically    x000D    background-color  green  x000D    x000D   centered   x000D    margin  0 auto  x000D    background-color  red  x000D    x000D   lt div class  container  gt  x000D     lt div class  centered  gt This content is centered lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

An element with    display  block     as div is by default  has a width determined by the width of its container  You can t make a block s width dependent on the width of its contents  shrink-to-fit     Except for blocks that are    float  left right    in CSS 2 1  but that s no use for centering    You could set the    display    property to    inline-block    to turn a block into a shrink-to-fit object that can be controlled by its parent s text-align property  but browser support is spotty  You can mostly get away with it by using hacks  eg  see -moz-inline-stack  if you want to go that way   The other way to go is tables  This can be necessary when you have columns whose width really can t be known in advance  I can t really tell what you re trying to do from the example code     there s nothing obvious in there that would need a shrink-to-fit block     but a list of products could possibly be considered tabular    PS  never use    pt    for font sizes on the web     px    is more reliable if you really need fixed size text  otherwise relative units like         are better  And    clear  ccc both        a typo     center     text-align center       center  gt  div     N B  child combinators don t work in IE6 or less       display inline-block      JSFiddle

User · Answer

add this css to your product container class      margin  0px auto      padding  0px      border 0      width  700px

User · Answer

Update 27 Feb 2015  My original answer keeps getting voted up  but now I normally use  bobince s approach instead    child      This is the item to center         display  inline-block     parent         and this is its parent container       text-align  center      My original post for historical purposes   You might want to try this approach    lt div class  product container  gt       lt div class  outer-center  gt           lt div class  product inner-center  gt           lt  div gt       lt  div gt       lt div class  clear   gt   lt  div gt    Here s the matching style    outer-center       float  right      right  50       position  relative     inner-center       float  right      right  -50       position  relative     clear       clear  both      JSFiddle  The idea here is that you contain the content you want to center in two divs  an outer one and an inner one   You float both divs so that their widths automatically shrink to fit your content   Next  you relatively position the outer div with it s right edge in the center of the container   Lastly  you relatively position the inner div the opposite direction by half of its own width  actually the outer div s width  but they are the same    Ultimately that centers the content in whatever container it s in   You may need that empty div at the end if you depend on your  product  content to size the height for the  product container

User · Answer

I found a more elegant solution  combining  inline-block  to avoid using float and the hacky clear both  It still requires nested divs tho  which isnt very semantic but it just works     div outer      display inline-block      position relative      left 50      div inner      position relative      left -50       Hope it helps

User · Answer

my solution was    parent       display  flex      flex-wrap  wrap      product       width  240px      margin-left  auto      height  127px      margin-right  auto

User · Answer

add this css to your product container class      margin  0px auto      padding  0px      border 0      width  700px

User · Answer

lt div class  outer  gt      lt div class  target  gt         lt div class  filler  gt         lt  div gt      lt  div gt   lt  div gt    outer     width 100      height  100px      target     position  absolute     width  auto     height  100px     left  50      transform  translateX -50        filler     position relative     width 150px     height 20px      If the target element is absolutely positioned  you can center it by moving it 50  in one direction  left  50   and then transforming it 50  in the opposition direction  transform translateX -50     This works without defining the target element s width  or with width auto   The parent element s position can be static  absolute  relative  or fixed

User · Answer

Try this new css and markup

Here is modified HTML:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

And here is modified CSS:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

User · Answer

I m afraid the only way to do this without explicitly specifying the width is to use  gasp  tables

User · Answer

Do display table  and set margin to auto  Important bit of code    relatedProducts       display  table      margin-left  auto      margin-right  auto      No matter how many elements you got now it will auto align in center  Example in code snippet    x000D   x000D   relatedProducts   x000D      display  table  x000D      margin-left  auto  x000D      margin-right  auto  x000D    x000D  a   x000D    text-decoration none  x000D    x000D   lt div class  row relatedProducts  gt  x000D   lt div class  homeContentTitle  style  margin  100px auto 35px  width  250px  gt Similar Products lt  div gt  x000D        x000D   lt a href     gt test1  lt  a gt  x000D   lt a href     gt test2  lt  a gt  x000D   lt a href     gt test3  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Crappy fix  but it does work     CSS    mainContent       position absolute      width 600px      background  FFFF99      sidebar       float left      margin-left 610px      max-width 300      background  FFCCCC     sidebar        text-align center      HTML    lt center gt   lt table border  0  cellspacing  0  gt     lt tr gt       lt td gt   lt div id  mainContent  gt  1 lt br  gt   lt br  gt  123 lt br  gt  123 lt br  gt  123 lt br  gt   lt  div gt  lt div id  sidebar  gt  lt br  gt   lt  div gt  lt  td gt   lt  tr gt   lt  table gt   lt  center gt

User · Answer

I know this question is old  but I m taking a crack at it  Very similar to bobince s answer but with working code example    Make each product an inline-block  Center the contents of the container  Done   http   jsfiddle net rgbk 6Z2Re    lt style gt   products      text-align center      product      display inline-block      text-align left       background-image  url  http   www color co uk wp-content uploads 2013 11 New Product jpg        background-size 25px      padding-left 25px      background-position 0 50       background-repeat no-repeat      price       margin         6px 2px      width          137px      color           666      font-size      14pt      font-style     normal      border         1px solid  CCC      background-color     EFEFEF     lt  style gt     lt div class  products  gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt   lt  div gt    See also  Center inline-blocks with dynamic width in CSS

User · Answer

By default  div elements are displayed as block elements  so they have 100  width  making centering them meaningless   As suggested by Arief  you must specify a width and you can then use auto when specifying margin in order to center a div   Alternatively  you could also force display  inline  but then you d have something that pretty much behaves like a span instead of a div  so that doesn t make a lot of sense

User · Answer

By default  div elements are displayed as block elements  so they have 100  width  making centering them meaningless   As suggested by Arief  you must specify a width and you can then use auto when specifying margin in order to center a div   Alternatively  you could also force display  inline  but then you d have something that pretty much behaves like a span instead of a div  so that doesn t make a lot of sense

User · Answer

Simple fix that works in old browsers  but does use tables  and requires a height to be set     lt div style  width 100  height 40px position absolute top 50  margin-top -20px   gt     lt table style  width 100   gt  lt tr gt  lt td align  center  gt      In the middle    lt  td gt  lt  tr gt  lt  table gt   lt  div gt

User · Answer

lt style type  text css  gt   container box      text-align center    content      padding 10px      background  ff0000      color  ffffff           use span istead of the inner divs   lt div class  container box  gt      lt span class  content  gt Hello lt  span gt   lt  div gt

User · Answer

By default  div elements are displayed as block elements  so they have 100  width  making centering them meaningless   As suggested by Arief  you must specify a width and you can then use auto when specifying margin in order to center a div   Alternatively  you could also force display  inline  but then you d have something that pretty much behaves like a span instead of a div  so that doesn t make a lot of sense

User · Answer

lt div class  outer  gt      lt div class  target  gt         lt div class  filler  gt         lt  div gt      lt  div gt   lt  div gt    outer     width 100      height  100px      target     position  absolute     width  auto     height  100px     left  50      transform  translateX -50        filler     position relative     width 150px     height 20px      If the target element is absolutely positioned  you can center it by moving it 50  in one direction  left  50   and then transforming it 50  in the opposition direction  transform translateX -50     This works without defining the target element s width  or with width auto   The parent element s position can be static  absolute  relative  or fixed

User · Answer

This will center an element such as an Ordered List  or Unordered List  or any element  Just wrap it with a Div with the class of outerElement and give the inner element the class of innerElement    The outerelement class accounts for IE  old Mozilla  and most newer browsers        outerElement           display  -moz-inline-stack          display  inline-block          vertical-align  middle          zoom  1          position  relative          left  50           innerElement       position  relative      left  -50

User · Answer

By default  div elements are displayed as block elements  so they have 100  width  making centering them meaningless   As suggested by Arief  you must specify a width and you can then use auto when specifying margin in order to center a div   Alternatively  you could also force display  inline  but then you d have something that pretty much behaves like a span instead of a div  so that doesn t make a lot of sense

User · Answer

use css3 flexbox with  justify-content center        lt div class  row  gt            lt div class  col  style  background red   gt content1 lt  div gt             lt div class  col  style    gt content2 lt  div gt       lt  div gt     row       display  flex     equal height of the children        height 100px      border 1px solid red      width  400px      justify-content center

User · Answer

add this css to your product container class      margin  0px auto      padding  0px      border 0      width  700px

User · Answer

I know this question is old  but I m taking a crack at it  Very similar to bobince s answer but with working code example    Make each product an inline-block  Center the contents of the container  Done   http   jsfiddle net rgbk 6Z2Re    lt style gt   products      text-align center      product      display inline-block      text-align left       background-image  url  http   www color co uk wp-content uploads 2013 11 New Product jpg        background-size 25px      padding-left 25px      background-position 0 50       background-repeat no-repeat      price       margin         6px 2px      width          137px      color           666      font-size      14pt      font-style     normal      border         1px solid  CCC      background-color     EFEFEF     lt  style gt     lt div class  products  gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt       lt div class  product  gt           lt div class  price  gt R  0 01 lt  div gt       lt  div gt   lt  div gt    See also  Center inline-blocks with dynamic width in CSS

User · Answer

lt div class  product container  gt   lt div class  outer-center  gt   lt div class  product inner-center  gt       lt  div gt   lt  div gt   lt div class  clear  gt  lt  div gt   lt  div gt    outer-center   float  right  right  50   position  relative     inner-center    float  right  right  -50   position  relative     clear    clear  both      product container   overflow hidden      If you dont provide  overflow hidden  for   product container    the  outer-center  div will overlap other nearby contents to the right of it  Any links or buttons to the right of  outer-center  wont work  Try background color for  outer-center  to understand the need of  overflow  hidden

User · Answer

I found a more elegant solution  combining  inline-block  to avoid using float and the hacky clear both  It still requires nested divs tho  which isnt very semantic but it just works     div outer      display inline-block      position relative      left 50      div inner      position relative      left -50       Hope it helps

User · Answer

This is one way to center anything within a div not know the inner width of the elements    product 15      position  relative      margin  0 auto      display  table     price  img      position  absolute      top  50       left  50       transform  translate -50   -50

User · Answer

I found interesting solution  I was making slider and had to center slide controls and I did this and works fine  You can also add relative position to parent and move child position vertical  Take a look http   jsfiddle net bergb 6DvJz   CSS    parent          width 600px          height 400px          background  ffcc00          text-align center          child          display inline-block          margin 0 auto          background  fff            HTML    lt div id  parent  gt       lt div id  child  gt voila lt  div gt   lt  div gt

User · Answer

Update 27 Feb 2015  My original answer keeps getting voted up  but now I normally use  bobince s approach instead    child      This is the item to center         display  inline-block     parent         and this is its parent container       text-align  center      My original post for historical purposes   You might want to try this approach    lt div class  product container  gt       lt div class  outer-center  gt           lt div class  product inner-center  gt           lt  div gt       lt  div gt       lt div class  clear   gt   lt  div gt    Here s the matching style    outer-center       float  right      right  50       position  relative     inner-center       float  right      right  -50       position  relative     clear       clear  both      JSFiddle  The idea here is that you contain the content you want to center in two divs  an outer one and an inner one   You float both divs so that their widths automatically shrink to fit your content   Next  you relatively position the outer div with it s right edge in the center of the container   Lastly  you relatively position the inner div the opposite direction by half of its own width  actually the outer div s width  but they are the same    Ultimately that centers the content in whatever container it s in   You may need that empty div at the end if you depend on your  product  content to size the height for the  product container

User · Answer

This is one way to center anything within a div not know the inner width of the elements    product 15      position  relative      margin  0 auto      display  table     price  img      position  absolute      top  50       left  50       transform  translate -50   -50

User · Answer

add this css to your product container class      margin  0px auto      padding  0px      border 0      width  700px

User · Answer

my solution was    parent       display  flex      flex-wrap  wrap      product       width  240px      margin-left  auto      height  127px      margin-right  auto

[html] Centering a div block without the width

Examples related to html

Examples related to css