CSS center display inline block

Question

I have a working code here  http   jsfiddle net WVm5d   you might need to make the result window bigger to see the align center effect   Question  The code works fine but I don t like to have display  table   It s the only way I could make the wrap-class align center  I think it would be better if there was a way to use display  block  or display  inline-block   Is it possible to solve the align center another way   Adding a fixed with to the container is not an option for me   I will also paste my code here if the JS Fiddle link gets broken in the future    x000D   x000D  body   x000D      background   bbb  x000D    x000D   x000D   wrap   x000D      background   aaa  x000D      margin  0 auto  x000D      display  table  x000D      overflow  hidden  x000D    x000D   x000D   sidebar   x000D      width  200px  x000D      float  left  x000D      background   eee  x000D    x000D   x000D   container   x000D      margin  0 auto  x000D      background   ddd  x000D      display  block  x000D      float  left  x000D      padding  5px  x000D    x000D   x000D   box   x000D      background   eee  x000D      border  1px solid  ccc  x000D      padding  10px  x000D      margin  5px  x000D      float  left  x000D    x000D   x000D   box nth-child 3n 1    x000D      clear  left  x000D    x000D   lt div class  wrap  gt  x000D       lt div class  sidebar  gt  x000D          Sidebar x000D       lt  div gt  x000D       lt div class  container  gt  x000D           lt div class  box  gt  x000D              Height1 x000D           lt  div gt  x000D           lt div class  box  gt  x000D              Height2 lt br   gt  x000D              Height2 x000D           lt  div gt  x000D           lt div class  box  gt  x000D              Height3 lt br   gt  x000D              Height3 lt br   gt  x000D              Height3 x000D           lt  div gt  x000D           lt div class  box  gt  x000D              Height1 x000D           lt  div gt  x000D           lt div class  box  gt  x000D              Height2 lt br   gt  x000D              Height2 x000D           lt  div gt  x000D           lt div class  box  gt  x000D              Height3 lt br   gt  x000D              Height3 lt br   gt  x000D              Height3 x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  sidebar  gt  x000D          Sidebar x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you have a  lt div gt  with text-align center   then any text inside it will be centered with respect to the width of that container element  inline-block elements are treated as text for this purpose  so they will also be centered

User · Answer

Try this  I added text-align  center to body and display inline-block to wrap  and then removed your display  table  body       background   bbb      text-align  center      wrap       background   aaa      margin  0 auto      display  inline-block      overflow  hidden

User · Answer

This will horizontally center an inline-block element without needing to modify its parent s styles    display  inline-block    position  relative       Move the element to the left by 50  of the container s width   left  50         Calculates 50  of the element s width  and moves it by that      amount across the X-axis to the left   transform  translateX -50

User · Answer

Just use    line-height 50px  Replace  50px  with the same height as your div

User · Answer

You don t need to use  display  table   The reason your margin  0 auto centering attempt doesn t work is because you didn t specify a width   This will work just fine    wrap       background   aaa      margin  0 auto      width  some width in pixels since it s the container      You don t need to specify display  block since that div will be block by default  You can also probably lose the overflow  hidden

User · Answer

You can also do this with positioning  set parent div to relative and child div to absolute        wrapper         position  relative       childDiv         position  absolute        left  50         transform  translateX -50

User · Answer

Great article i found what worked best for me was to add a   to the size   wrap   margin-top 5   margin-bottom 5   height 100   display block

User · Answer

I just changed 2 parameters    wrap       display  block      width 661px     Live Demo

User · Answer

The accepted solution wouldn t work for me as I need a child element with display  inline-block to be both horizontally and vertically centered within a 100  width parent  I used Flexbox s justify-content and align-items properties  which respectively allow you to center elements horizontally and vertically  By setting both to center on the parent  the child element  or even multiple elements   will be perfectly in the middle  This solution does not require fixed width  which would have been unsuitable for me as my button s text will change  Here is a CodePen demo and a snippet of the relevant code below   x000D   x000D   parent     display  flex    justify-content  center    align-items  center    x000D   lt div class  parent  gt     lt a class  child  href   0  gt Button lt  a gt   lt  div gt  x000D   x000D   x000D

[css] CSS center display inline block?

Examples related to css