¿Cómo puedo alinear horizontalmente mis divs?

Por alguna razón, mis divs no se centrarán horizontalmente en un div contenedor:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Y a veces hay una fila div con solo un bloque div en ella. ¿Qué estoy haciendo mal?

Para lograr lo que está tratando de hacer:

Considere usar en display: inline-blocklugar de float.

Prueba esto:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

MANIFESTACIÓN

• tener margin: 0 auto;junto con width: 100%es inútil porque tu elemento ocupará todo el espacio.

• float: leftflotará los elementos hacia la izquierda, hasta que no quede espacio, por lo que irán a una nueva línea. Úselo display: inline-blockpara poder mostrar elementos en línea, pero con la capacidad de proporcionar tamaño (a diferencia de display: inlinedonde se ignoran el ancho / alto)

Las alineaciones en CSS habían sido una pesadilla. Afortunadamente, el W3C introdujo un nuevo estándar en 2009: Flexible Box . Hay un buen tutorial al respecto aquí . Personalmente lo encuentro mucho más lógico y más fácil de entender que otros métodos.

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Usando FlexBox:

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

La última tendencia es usar Flex o CSS Grid en lugar de usar Float. Sin embargo, todavía un 1% de los navegadores no son compatibles con Flex. Pero, ¿quién se preocupa realmente por los antiguos usuarios de IE?

Violín: marque aquí

Otro ejemplo de trabajo , usandodisplay: inline-block ytext-align: center

HTML :

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS :

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

Violín: http://jsfiddle.net/fNvgS/

Aunque no cubre esta pregunta (porque desea alinear las <div>s dentro del contenedor) pero está directamente relacionada: si desea alinear solo un div horizontalmente, puede hacer esto:

#MyDIV
{
    display: table;
    margin: 0 auto;
}

Si los elementos deben mostrarse en una línea y IE 6/7 no importa, considere usar display: tabley en display: table-celllugar de float.

inline-blockconduce a espacios horizontales entre elementos y requiere ponerlos a cero. La forma más sencilla es establecer el font-size: 0elemento principal y luego restaurar font-sizelos elementos secundarios que tienen display: inline-blockestableciendo su valor en font-sizea pxo rem.

Probé la respuesta aceptada, pero finalmente encontré que:

margin: 0 auto;
width: anything less than 100%;

Funciona bien hasta ahora.

Utilizo estos dos enfoques cuando necesito manejar la alineación div horizontal.
primero ( Alineación central usando la propiedad del margen ):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

Establecer los márgenes izquierdo y derecho en automático especifica que deben dividir el margen disponible por igual. La alineación central no tiene ningún efecto si el ancho es del 100%.

y el segundo:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

Usar el segundo enfoque es conveniente cuando tiene varios elementos y desea que todos estén centrados en una celda de la tabla (es decir, varios botones en una celda).