Tengo un problema cuando intento centrar los "productos" del bloque div porque no conozco de antemano el ancho del div. ¿Alguien tiene una solución?

Actualización: el problema que tengo es que no sé cuántos productos mostraré, puedo tener 1, 2 o 3 productos, puedo centrarlos si fuera un número fijo ya que sabría el ancho del padre div, simplemente no sé cómo hacerlo cuando el contenido es dinámico.

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}

<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

Actualización 27 de febrero de 2015: mi respuesta original sigue siendo votada, pero ahora normalmente uso el enfoque de @bobince.

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

Mi publicación original para fines históricos:

Es posible que desee probar este enfoque.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

Aquí está el estilo a juego:

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

La idea aquí es que contiene el contenido que desea centrar en dos divs, uno externo y uno interno. Flota ambos divs para que sus anchos se reduzcan automáticamente para adaptarse a su contenido. Luego, colocas relativamente el div externo con su borde derecho en el centro del contenedor. Por último, colocas relativamente el div interno en la dirección opuesta por la mitad de su propio ancho (en realidad, el ancho del div externo, pero son iguales). En última instancia, eso centra el contenido en cualquier contenedor en el que se encuentre.

Es posible que necesite ese div vacío al final si depende del contenido de su "producto" para dimensionar la altura del "contenedor_producto".

Un elemento con 'display: block' (como div es por defecto) tiene un ancho determinado por el ancho de su contenedor. No puede hacer que el ancho de un bloque dependa del ancho de su contenido (reducir para ajustar).

(Excepto para los bloques que son 'flotante: izquierda / derecha' en CSS 2.1, pero eso no sirve para centrar).

Puede establecer la propiedad 'display' en 'inline-block' para convertir un bloque en un objeto que se ajuste para que se pueda controlar mediante la propiedad de alineación de texto de su padre, pero el soporte del navegador es irregular. En su mayoría, puede salirse con la suya utilizando hacks (por ejemplo, ver -moz-inline-stack) si desea seguir ese camino.

La otra manera de ir es tablas. Esto puede ser necesario cuando tiene columnas cuyo ancho realmente no se puede conocer de antemano. Realmente no puedo decir qué está tratando de hacer con el código de ejemplo: no hay nada obvio allí que necesite un bloque de contracción, pero una lista de productos podría considerarse tabular.

[PD. nunca use 'pt' para tamaños de fuente en la web. 'px' es más confiable si realmente necesita texto de tamaño fijo, de lo contrario, las unidades relativas como '%' son mejores. Y "claro: ccc ambos": ¿un error tipográfico?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

La mayoría de los navegadores admiten la display: table;regla CSS. Este es un buen truco para centrar un div en un contenedor sin agregar HTML adicional ni aplicar estilos de restricción al contenedor (como el text-align: center;que centraría el resto del contenido en línea en el contenedor), mientras se mantiene el ancho dinámico para el div contenido:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS:

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

Actualización (2015-03-09):

La forma correcta de hacer esto hoy es usar reglas de flexbox. El soporte del navegador es un poco más restringido ( soporte de tabla CSS frente a soporte de flexbox ) pero este método también permite muchas otras cosas, y es una regla CSS dedicada para este tipo de comportamiento:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

seis formas de pelar a ese gato:

Botón uno: cualquier cosa de tipo display: blockasumirá el ancho completo de los padres. (a menos que se combine con floato un display: flexpadre). Cierto. Mal ejemplo.

Botón 2: ir a display: inline-blockconducirá a un ancho automático (en lugar de completo). Luego puede centrarse usando text-align: center en el bloque de envoltura . Probablemente el más fácil y más compatible, incluso con navegadores 'vintage' ...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

Botón 3: no es necesario poner nada en la envoltura. Quizás esta sea la solución más elegante. También funciona verticalmente. (La compatibilidad del navegador para la traducción es lo suficientemente buena (≥IE9) en estos días ...).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Por cierto: también es una excelente manera de centrar verticalmente bloques de altura desconocida (en relación con el posicionamiento absoluto).

Botón 4: posicionamiento absoluto. Solo asegúrese de reservar suficiente altura en el contenedor, ya que nadie más lo hará (ni clearfix ni implícito ...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

Botón 5: flotante (que también trae elementos de nivel de bloque al ancho dinámico) y un cambio relativo. Aunque he nunca visto esto en la naturaleza. Quizás hay desventajas ...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

Actualizar: Botón 6: Y hoy en día, también puedes usar flex-box. Tenga en cuenta que los estilos se aplican al contenedor del objeto centrado.

.wrapSix
  display: flex
  justify-content: center

→ código fuente completo (sintaxis del lápiz)

Encontré una solución más elegante, combinando "bloque en línea" para evitar el uso de flotante y hacky clear: ambos. Todavía requiere divs anidados, que no es muy semántico, pero simplemente funciona ...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

¡Espero eso ayude!

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

Si el elemento objetivo está absolutamente posicionado, puede centrarlo moviéndolo 50% en una dirección ( left: 50%) y luego transformándolo 50% en la dirección de oposición ( transform:translateX(-50%)). Esto funciona sin definir el ancho del elemento de destino (o con width:auto). La posición del elemento padre puede ser estática, absoluta, relativa o fija.

Por defecto, los divelementos se muestran como elementos de bloque, por lo que tienen un ancho del 100%, por lo que centrarlos no tiene sentido. Según lo sugerido por Arief, debe especificar ay widthluego puede usarlo autoal especificar marginpara centrar a div.

Alternativamente, también podría forzar display: inline, pero entonces tendría algo que se comportaría como un en spanlugar de un div, por lo que no tiene mucho sentido.

Esto centrará un elemento como una Lista ordenada, o Lista no ordenada, o cualquier elemento. Simplemente envuélvelo con un Div con la clase de innerElement y dale al elemento interno la clase de innerElement.

La clase outerelement representa IE, el antiguo Mozilla y la mayoría de los navegadores más nuevos.

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

use css3 flexbox con justify-content: center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

Ligera variación en la respuesta de Mike M. Lin

Si agrega overflow: auto;(o hidden) a div.product_container, entonces no necesita div.clear.

Esto se deriva de este artículo -> http://www.quirksmode.org/css/clearing.html

Aquí está HTML modificado:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

Y aquí está CSS modificado:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

La razón, por qué es mejor sin div.clear (aparte de que se siente mal tener un elemento vacío) es la asignación de margen excesivamente celosa de Firefox.

Si, por ejemplo, tienes este html:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

luego, en Firefox (8.0 en el punto de escritura), verá 11pxmargen antes product_container . Lo peor es que obtendrá una barra de desplazamiento vertical para toda la página, incluso si el contenido se ajusta perfectamente a las dimensiones de la pantalla.

Prueba este nuevo CSS y marcado

Aquí está HTML modificado:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

Y aquí está CSS modificado:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

Si no proporciona "desbordamiento: oculto" para ".product_container", el div "centro exterior" se superpondrá a otros contenidos cercanos a la derecha del mismo. Cualquier enlace o botón a la derecha del "centro exterior" no funcionará. Pruebe el color de fondo para "centro exterior" para comprender la necesidad de "desbordamiento: oculto"

Encontré una solución interesante, estaba haciendo un control deslizante y tuve que centrar los controles deslizantes e hice esto y funciona bien. También puede agregar una posición relativa al padre y mover la posición del niño vertical. Echar un vistazo http://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

Hacer display:table;y configurar marginaauto

Bit de código importante:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

No importa cuántos elementos tenga ahora, se alineará automáticamente en el centro

Ejemplo en fragmento de código:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}

<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

Me temo que la única forma de hacerlo sin especificar explícitamente el ancho es usar tablas (jadeo).

Arreglo horrible, pero funciona ...

CSS:

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

Solución simple que funciona en navegadores antiguos (pero usa tablas y requiere una altura para ser establecida):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

use span en lugar de los divs internos

<div class="container_box">
   <span class="content">Hello</span>
</div>

Sé que esta pregunta es antigua, pero me estoy rindiendo. Muy similar a la respuesta de bobince pero con un ejemplo de código de trabajo.

Haga de cada producto un bloque en línea. Centrar el contenido del contenedor. Hecho.

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

Ver también: Centrar bloques en línea con ancho dinámico en CSS

Esta es una forma de centrar cualquier cosa dentro de un div sin conocer el ancho interno de los elementos.

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

mi solución fue:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

agregue este CSS a su clase product_container

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;