Cómo centrar div, texto, imagen y tabla en vertical y horizontal en HTML y CSS

Centrado Horizontal.

Básicamente hay dos maneras de centrar elementos HTML horizontalmente, si es tipo texto, como enlaces <a>, párrafos <p>, encabezados, <h1>,<h2> ... o listas <ul>, <ol> basta con añadir la propiedad CSS text-align: center.

Para los demás elementos HTML como tablas <table>, imágenes <img> y capas <div> tenemos que poner la propiedad display:block; y margin:0 auto; (0 de margen arriba y abajo y auto de izquierda y derecha).

Centrado Vertical.

Para centrar elementos verticalmente a través de CSS existen varias técnicas, que os pasamos a explicar.

Centrado con la propiedad CSS vertical-align: center;

Partimos de un HTML sencillo con dos capas (padre e hijo).

<div class="capa-padre">
  <div class="capa-hijo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet eleifend quam, et blandit arcu. Curabitur tincidunt hendrerit finibus. Praesent tellus ipsum, sodales non dui sit amet, mollis aliquam ex. Etiam sed elit sit amet erat dictum iaculis. Nam ut tempor ligula, eu efficitur erat.
  </div>
</div>

Para poder centrar un <div> simplemente tenemos que poner a la capa contenedora la propiedad display: table; y al contenido display: table-cell; y vertical align: center;

.capa-padre {
    display: table;    
    height: 300px;
}
.capa-hijo {
    display: table-cell;
    vertical-align: middle;
}

Centrado con la propiedad CSS: line-height;

Se suele utilizar para los elementos de texto, si tenemos un párrafo con un tamaño de 20px, basta con añadir el mismo tamaño para la propiedad line-height: 20px;

Por último si queremos centrar verticalmente con posición absoluta, tenemos que añadir el siguiente código HTML y CSS.

<div class="capa-padre">
  <div class="capa-hijo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet eleifend quam, et blandit arcu. Curabitur tincidunt hendrerit finibus. Praesent tellus ipsum, sodales non dui sit amet, mollis aliquam ex. Etiam sed elit sit amet erat dictum iaculis. Nam ut tempor ligula, eu efficitur erat.
  </div>
</div>

.capa-padre {
    background-color: #000;
    min-height: 467px;
    position: relative;
}
.capa-hijo {
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

A continuación os dejamos ejemplos de centrado horizontal y vertical en nuestro codepen

See the Pen Cómo centrar div, texto, imagen y tabla en vertical y horizontal en HTML y CSS by Pedro Marín (@pedromarin) on CodePen.