El centro de CSS muestra el bloque en línea?

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 centro de alineación)

Pregunta

El código funciona bien pero no me gusta 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 un fijo al contenedor no es una opción para mí.

También pegaré mi código aquí si el enlace de 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; } 
 
Height1
Height2
Height2
Height3
Height3
Height3
Height1
Height2
Height2
Height3
Height3
Height3

La solución aceptada no me funcionaría, ya que necesito un elemento hijo con display: inline-block para estar centrado tanto horizontal como verticalmente dentro de un elemento primario de ancho del 100%.

Utilicé las propiedades justify justify-content y align-items Flexbox, que respectivamente le permiten centrar los elementos horizontal y verticalmente. Al establecer ambos para center en el elemento primario, el elemento secundario (o incluso elementos múltiples) estará perfectamente en el medio.

Esta solución no requiere un ancho fijo, lo cual no hubiera 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; } .child { display: inline-block; } 
  

Prueba esto. Agregué text-align: center to body y display:inline-block para envolver, y luego eliminé tu display: table

 body { background: #bbb; text-align: center; } .wrap { background: #aaa; margin: 0 auto; display: inline-block; overflow: hidden; } 

Si tiene un

con text-align:center; , entonces cualquier texto dentro de él se centrará con respecto al ancho de ese elemento contenedor. inline-block elementos de inline-block se tratan como texto para este fin, por lo que también estarán centrados.

También puede hacer esto con el posicionamiento, establecer div principal a relativo y div infantil a absoluto.

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

Acabo de cambiar 2 parámetros:

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

Demo en vivo

No necesita usar “display: table”. La razón por la cual su bash de autocentrado de margen: 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. También es probable que pierda el desbordamiento: oculto.

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

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

Solo usa:

line-height:50px

Reemplaza “50px” con la misma altura que tu div.