Centro CSS exibir bloco embutido?

Eu tenho um código de trabalho aqui: http://jsfiddle.net/WVm5d/ (pode ser necessário aumentar a janela de resultados para ver o efeito central do alinhamento)

Questão

O código funciona bem, mas eu não gosto de ter display: table;. É a única maneira que eu poderia fazer o centro de alinhamento da classe de embalagem. Eu acho que seria melhor se houvesse uma maneira de usar display: block;ou display: inline-block;. É possível resolver o centro de alinhamento de outra maneira?

Adicionar um fixo ao contêiner não é uma opção para mim.

Também colarei meu código aqui se o link do JS Fiddle for quebrado no futuro:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

A solução aceita não funcionaria para mim, pois eu preciso que um elemento filho display: inline-blockseja centrado horizontal e verticalmente em um pai de 100% de largura.

Usei as propriedades justify-contente align-itemspropriedades do Flexbox , que respectivamente permitem centralizar os elementos horizontal e verticalmente. Ao definir ambos centerno pai, o elemento filho (ou até vários elementos!) Ficará perfeitamente no meio.

Esta solução não requer largura fixa, o que seria inadequado para mim, pois o texto do meu botão será alterado.

Aqui está uma demonstração do CodePen e um trecho do código relevante abaixo:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Tente isso. Eu adicionei text-align: centerao corpo e display:inline-blockao embrulho e, em seguida, removi seudisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Se você tiver um <div>com text-align:center;, qualquer texto dentro dele será centralizado em relação à largura desse elemento de contêiner. inline-blockelementos são tratados como texto para esse fim, para que também sejam centralizados.

Você também pode fazer isso com o posicionamento, definir div pai como relativo e div filho como absoluto.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Você não precisa usar "display: table". O motivo da sua margem: 0 tentativa de centralização automática não funcionar é porque você não especificou uma largura.

Isso funcionará bem:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

Você não precisa especificar display: block, pois essa div será bloqueada por padrão. Você também pode provavelmente perder o estouro: oculto.

Semelhante à resposta do @ vijayscode, isso centralizará horizontalmente um elemento de bloco embutido (mas sem a necessidade de modificar também os estilos de seus pais):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Acabei de alterar 2 parâmetros:

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

Demonstração ao vivo

Ótimo artigo, descobri que o que funcionou melhor para mim foi adicionar um% ao tamanho

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Apenas use:

line-height:50px

Substitua "50px" pela mesma altura da sua div.