¿Bloque en línea de visualización central CSS?

Tengo un código de trabajo aquí: http://jsfiddle.net/WVm5d/ (es posible que necesite 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 puedo hacer que la clase envolvente se alinee en el centro. Creo que sería mejor si hubiera una manera de usar display: block;o display: inline-block;. ¿Es posible resolver el centro de alineación de otra manera?

Agregar un fijo al 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>

Expandir fragmento

Feb 13 '11 03:02 Jens Törnell

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

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

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

Feb 12 '2011 21:02 Bazzz

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

Utilicé las propiedades justify-contenty de Flexbox align-items, que respectivamente te permiten centrar elementos horizontal y verticalmente. Al configurar ambos en centerel elemento principal, el elemento secundario (¡o incluso varios elementos!) estará perfectamente en el medio.

Esta solución no requiere un ancho fijo, lo que no habría sido adecuado 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;
}

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

Expandir fragmento

Mar 15 '2018 17:03 EdA