Centrado de texto con CSS

Lo más fácil de centrar en una página web es el texto. Sólo hay un estilo de propiedad que usted necesita saber para hacer esto:

alineación de texto 
. Tomemos el estilo CSS de abajo, por ejemplo:p.center { text-align: center; }

Con esta línea de CSS, cada párrafo escrito con la clase center se centraría horizontalmente dentro de su elemento padre. Por ejemplo, si el párrafo estaba dentro de una división, lo que significa que era un hijo de esa división, estaría centrado horizontalmente dentro de la .
He aquí un ejemplo de esta clase aplicada en el documento HTML:
Al centrar el texto con la propiedad text-align, recuerde que estará centrado dentro del elemento que lo contiene y no necesariamente dentro de la página completa. Además, recuerde que el texto justificado por el centro puede ser difícil de leer para bloques grandes de contenido, así que use este estilo con moderación. Los titulares y los pequeños bloques de texto, como el texto para un u otro contenido, son a menudo fáciles de leer y están bien centrados, pero los bloques de texto más grandes, como el texto completo en sí mismo, serían difíciles de consumir si el contenido estuviera totalmente justificado en el centro. Recuerde, la legibilidad es siempre clave cuando se trata del texto del sitio web! 
  Centrado de bloques de contenido con CSS
Los bloques son cualquier elemento de la página que tiene un ancho definido y se establecen como un elemento de nivel de bloque. A menudo, estos bloques se crean utilizando el elemento HTML . La forma más común de centrar bloques con CSS es establecer los márgenes izquierdo y derecho a
automático
. Aquí está el CSS para la división que tiene un atributo de clase "center" aplicado a ella: div.center {
.margen: 0 auto;
ancho: 80em;
}

Esta abreviatura de CSS para la propiedad margin establecería los márgenes superior e inferior a un valor de 0, mientras que la izquierda y la derecha usarían "auto". Esto esencialmente toma cualquier espacio que esté disponible y lo divide uniformemente entre los dos lados de la ventana de visualización, centrando efectivamente el elemento en la página.
Aquí se aplica en el HTML:
>.pero el texto dentro está alineado a la izquierda;
Mientras su bloque tenga un ancho definido, se centrará dentro del elemento que lo contiene. El texto contenido en ese bloque no estará centrado en él, sino que estará justificado a la izquierda. Esto se debe a que el texto está justificado a la izquierda en el valor predeterminado en los navegadores web. Si usted quisiera que el texto se centrara también, podría usar la propiedad text-align que cubrimos anteriormente junto con este método para centrar la división.
  Centrado de imágenes con CSS
Aunque la mayoría de los navegadores mostrarán imágenes centradas usando la misma propiedad de alineación de texto que ya vimos para el párrafo, no es una buena idea confiar en esa técnica ya que no es recomendada por el W3C. Dado que no es recomendable, siempre existe la posibilidad de que versiones futuras de los navegadores puedan optar por ignorar este método.
En lugar de utilizar la alineación de texto para centrar una imagen, debe indicar explícitamente al navegador que la imagen es un elemento de nivel de bloque. De esta forma, se puede centrar como en cualquier otro bloque. Aquí está el CSS para hacer que esto suceda:
img.center {
>img.centervisualización: bloque;
> bloquemargin-left: auto;
margin-right: auto;
}

Y aquí está el HTML que para la imagen que queremos centrar:
También puede centrar objetos usando CSS en línea (ver abajo), pero este enfoque NO es recomendable ya que añade estilos visuales a su marcado HTML. Recuerde, queremos separar estilo y estructura, por lo que añadir estilos CSS a su código HTML romperá esa separación y, como tal, debería evitarse siempre que sea posible.
  Centrando Elementos Verticalmente Con CSS
Centrar objetos verticalmente siempre ha sido un reto en el diseño web, pero con el lanzamiento del módulo CSS Flexible Box Layout Module en CSS3, ahora hay una forma de hacerlo.
La alineación vertical funciona de manera similar a la alineación horizontal cubierta anteriormente. La propiedad CSS es
 alineación vertical
con el
mediano 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>ivalor..vcenter {
vertical-alineado: medio;
}

La desventaja de este enfoque es que no todos los navegadores soportan CSS FlexBox, aunque cada vez son más los que utilizan este nuevo método de diseño CSS. De hecho, todos los navegadores modernos de hoy en día soportan este estilo CSS. Esto significa que su única preocupación con Flexbox sería una versión mucho más antigua del navegador. 
Si tiene problemas con navegadores antiguos, el W3C recomienda que centre el texto verticalmente en un contenedor utilizando el siguiente método:

Coloque los elementos a centrar dentro de un elemento de contención, como por ejemplo un div.
Fije una altura mínima en el elemento que lo contiene.
Declarar que contiene un elemento como una celda de tabla.
Ponga la alineación vertical en "medio".

Por ejemplo, aquí está el CSS:
.vcenter {
min-height: 12em;
display: table-cell;
vertical-alineado: medio;
}

Y aquí está el HTML:
Este texto está centrado verticalmente en la caja.  

  Centrado vertical y versiones anteriores de Internet Explorer
Hay algunas maneras de forzar a Internet Explorer (IE) a centrar y luego usar comentarios condicionales para que sólo IE vea los estilos, pero son un poco verbosos y feos. La buena noticia es que con la reciente decisión de Microsoft de eliminar el soporte para versiones anteriores de IE, esos navegadores que no son compatibles deberían estar a punto de salir, facilitando a los diseñadores web el uso de métodos modernos de diseño como CSS FlexBox, que hará que todo el diseño CSS, y no sólo el centrado, sea más fácil para todos los diseñadores web.