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

Question

que tienen un código de trabajo aquí: http://jsfiddle.net/WVm5d/ (Es posible que tenga que hacer más grande la ventana de resultados para ver el efecto align centro)

Pregunta

El código funciona bien, pero no me gustaría tener display: table;. Es la única forma en que podría hacer que el centro de alineación de la 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 una fija al contenedor no es una opción para mí.

también voy a pegar mi código aquí si el enlace JS violín se rompe en el futuro:

HTML

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

CSS

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

Answer 1

Pruebe esto. Añadí text-align: center al cuerpo y display:inline-block para envolver, y luego se retira el display: table

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

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

Answer 2

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-block los elementos se tratan como texto para este fin, por lo que también estarán centrados.

Answer 3

acabo de cambiar 2 parámetros:

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

Live Demo

Answer 4

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

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

Answer 5

No necesita usar "display: table". La razón por la cual su intento de autocentrado de margen: 0 no funciona es porque no especificó un ancho.

Esto funciona muy bien:

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

No es necesario especificar display: block, ya que div será de bloque por defecto. También es probable que pierda el desbordamiento: oculto.

Answer 6

sólo tiene que utilizar:

line-height:50px

reemplazar "50px" con la misma altura que el div.

Answer 7

También puede hacer esto con el posicionamiento, establezca parent div en relative y child div en absolute.

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