Centrar elemento SPAN o DIV en CSS

En todo diseño siempre habrá elementos que debamos centrar y nuestro mejor recurso para esto por lo general es el margin: 0 auto. Otras veces usamos el text-align: center, comunmente con texto, pero la pregunta sería, ¿Cuando usar uno y cuando usar el otro?.

Background Existen dos formas básicas de desplegar elementos HTML, inline y block (En línea y bloque). Esto quiere decir que si a un elemento le decimos que seá de tipo inline, éste ira en línea con el texto o con otros elementos que compartan ésta propiedad. A diferencia de los elementos inline los elementos block no permiten que otros elementos convivan en la misma línea que éstos, tanto como por la izquierda como la derecha. Los elementos SPAN son un buen ejemplo de elementos en línea y los DIV son elementos de tipo bloque, no hay necesidad de especificarles el tipo, ya que tienen dichas propiedades de forma nativa.

Centrando un elemento SPAN No imaginemos al SPAN como una "caja", sino como texto, pues su tamaño es definido por lo que contengan. Por tal motivo para centrarlos hay que especificar al elemento padre, que es aquel que los contiene, que todo los objetos que este dentro de él se centren y eso se lográ definiendo el estilo como se ve a continuación:

#elementoPadre{
background: #FFFFFF;
text-align: center;
border: #CCCCCC 2px solid;
width: 250px;
height: 100px;
}
#elementoPadre span{
background: #333333;
border: #CCCCCC 1px solid;
color: #FFFFFF;
}

Al aplicar este estilo el resultado es el siguiente:

Estoy centrado

Centrando un elemento DIV Los elementos DIV si son "cajas" pues tienen un tamaño que nosotros podemos definir y gracias a que se apropian de la línea donde son creados podemos centrarlos usando la propiedad margin. y definiendo los valores 0 para la parte superior e inferior , mientas que para los lados dejamos que se determinen de forma automática. Para demostrarlo usemos nuevamente el ejemplo anterior:

#elementoPadre{
background: #FFFFFF;
margin: 0 auto;
text-align: center;
border: #CCCCCC 2px solid;
width: 250px;
height: 100px;
}
#elementoPadre span{
background: #333333;
border: #CCCCCC 1px solid;
color: #FFFFFF;
}

El elemento a centrar será el padre y el resultado es el siguiente:

Papá también

Conclusión El centrado de elementos es una tarea común, pero que muchas veces se convierte en todo un drama cuando olvidamos las diferencias entre los elementos inline y los block.