Bloque en línea de visualización del centro CSS?

Tengo un código de trabajo aquí: http://jsfiddle.net/WVm5d/ (es posible que deba agrandar la ventana de resultados para ver el efecto de alineación central)

Pregunta

El código funciona bien pero no me gusta tenerlo display: table;. Es la única forma en que podría alinear el centro de clase envolvente. Creo que sería mejor si hubiera una forma de usar display: block;o display: inline-block;. ¿Es posible resolver el centro de alineación de otra manera?

Agregar un fijo con el contenedor no es una opción para mí.

También pegaré mi código aquí si el enlace JS Fiddle se rompe en el 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>

La solución aceptada no funcionaría para mí, ya que necesito un elemento secundario display: inline-blockque esté centrado tanto horizontal como verticalmente dentro de un padre de 100% de ancho.

Utilicé Flexbox justify-contenty align-itemspropiedades, que respectivamente le permiten centrar elementos horizontal y verticalmente. Al establecer ambos centeren el padre, el elemento hijo (¡o incluso varios elementos!) Estará perfectamente en el medio.

Esta solución no requiere un ancho fijo, lo que hubiera sido inadecuado para mí ya que el texto de mi botón cambiará.

Aquí hay una demostración de CodePen y un fragmento del código relevante a continuación:

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

.child {
  display: inline-block;
}

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

Prueba esto. Agregué text-align: centeral cuerpo y display:inline-blockpara envolver, y luego eliminé tudisplay: table

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

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

Si tiene un <div>con text-align:center;, entonces cualquier texto dentro de él estará centrado con respecto al ancho de ese elemento contenedor. inline-blockLos elementos se tratan como texto para este propósito, por lo que también se centrarán.

También puede hacer esto con el posicionamiento, establezca el div padre en relativo y el div hijo en absoluto.

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

No necesita usar "display: table". La razón por la que su margen: el intento de centrado automático 0 no funciona es porque no especificó un ancho.

Esto funcionará bien:

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

No necesita especificar display: block ya que ese div se bloqueará de manera predeterminada. Probablemente también pueda perder el desbordamiento: oculto.

Similar a la respuesta de @ vijayscode, esto centrará horizontalmente un elemento de bloque en línea (pero sin necesidad de modificar también los estilos de sus padres):

  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

Acabo de cambiar 2 parámetros:

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

Demo en vivo

El gran artículo que encontré que lo que mejor funcionó para mí fue agregar un% al tamaño

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

Solo usa:

line-height:50px

Reemplace "50px" con la misma altura que su div.