[css] CSS center display inline block?

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:

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

<div class="wrap">_x000D_
    <div class="sidebar">_x000D_
        Sidebar_x000D_
    </div>_x000D_
    <div class="container">_x000D_
        <div class="box">_x000D_
            Height1_x000D_
        </div>_x000D_
        <div class="box">_x000D_
            Height2<br />_x000D_
            Height2_x000D_
        </div>_x000D_
        <div class="box">_x000D_
            Height3<br />_x000D_
            Height3<br />_x000D_
            Height3_x000D_
        </div>_x000D_
        <div class="box">_x000D_
            Height1_x000D_
        </div>_x000D_
        <div class="box">_x000D_
            Height2<br />_x000D_
            Height2_x000D_
        </div>_x000D_
        <div class="box">_x000D_
            Height3<br />_x000D_
            Height3<br />_x000D_
            Height3_x000D_
        </div>_x000D_
    </div>_x000D_
    <div class="sidebar">_x000D_
        Sidebar_x000D_
    </div>_x000D_
</div>

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

If you have a <div> 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.

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

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.

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%);

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

I just changed 2 parameters:

.wrap {
    display: block;
    width:661px;
}

Live Demo

Just use:

line-height:50px

Replace "50px" with the same height as your div.