Cómo centrar verticalmente un elemento HTML.

Existen múltiples maneras para centrar verticalmente un elemento HTML. Podemos usar CSS puro o Flexbox o muchas otras.

Hoy os mostraré algunas maneras.

1. Centrado con Flexbox

El método recomendado para centrar verticalmente un elemento HTML es con el uso de Flexbox.

Sabíamos  que los diseños en CSS en algunas ocasiones eran una pesadilla y todos consideramos a flexbox nuestro salvador. Queda por ver si resulta así, pero flexbox resuelve fácilmente un problema que CSS ha tenido durante demasiado tiempo: el centrado vertical con CSS.

Déjame mostrarte lo fácil que es!

El centrado vertical requiere elementos primarios y secundarios …

<div class='flexbox-container'>
<div> Bla, bla, </div>
<div> Bla, bla, bla, bla, bla</div>
<div> Bla, bla, bla, bla, bla</div>
<div> Bla, bla, bla, bla, bla</div>
</div>

… pero solo el elemento primario necesita propiedades CSS configuradas para el centrado vertical de elementos secundarios:

.flexbox-container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
        justify-content: center 
	align-items: center;
}

Con la propiedad justify-content: center hacemos que se centre horizontalmente, mientras que con align-items: center hacemos lo propio verticalmente. Cabe resaltar que estas propiedades sólo aplican en caso que el padre sea de mayor tamaño que el hijo. De hecho, si queremos que el hijo esté centrado en toda la pantalla deberemos asignarle esas dimensiones al padre.

El centrado vertical sin flexbox es optimista en el mejor de los casos, por lo que es alentador que el futuro de los diseños CSS facilitará esta tarea. Todavía no estoy convencido de que Flexbox resuelva todos los problemas de diseño del mundo web, pero resolver el centrado vertical es una gran ventaja.

2. Vertical-Align

Centrar verticalmente un elemento HTML con CSS es bastante fácil. Cuando el elemento a centrar es un elemento en línea, utilizamos el centro de alineación de texto en su elemento primario. Cuando el elemento es un elemento de nivel de bloque, le damos un ancho y establecemos los márgenes izquierdo y derecho en un valor de auto.

Con text-align: center en mente, la mayoría de las personas buscan primero la alineación vertical vertical-align para centrar las cosas verticalmente. Parece lógico y sé que fue mi primera opción. Si viene de un diseño basado en tablas, probablemente haya utilizado el atributo valign, lo que también lo llevaría a creer que la alineación vertical vertical-align es el camino a seguir.

Sin embargo, valign solo funcionó en las celdas de la tabla. La alineación vertical es similar. También se aplica a las celdas de la tabla y funciona con algunos elementos en línea.

Los valores de vertical-align tienen significado con respecto a un elemento en línea padre.

• Con una línea de texto, los valores son relativos a la altura de la línea.
• Con una celda de tabla, los valores son relativos al algoritmo de altura de tabla, que generalmente significa la altura de la fila.

Desafortunadamente, vertical-align no se aplica a elementos de nivel de bloque como un párrafo dentro de un div, que es donde la mayoría de nosotros descubrimos que no es la solución para el centrado vertical.

Sin embargo, no todo está perdido, ya que tenemos otros métodos para centrar elementos de nivel de bloque y aún podemos usar vertical-align cuando sea apropiado. El método que elija dependerá de lo que intente centrar en relación con su elemento contenedor.

3. Line-Height

Otra forma de centrar verticalmente un elemento HTML con CSS es utilizar line-height.

Este método funcionará cuando desee centrar verticalmente una sola línea de texto. Todo lo que necesitamos hacer es establecer una altura de línea en el elemento que contiene el texto más grande que su tamaño de fuente.

De manera predeterminada, se dará igual espacio encima y debajo del texto, por lo que el texto se ubicará en el centro vertical.

La mayoría de los tutoriales también establecerán la altura del elemento con el mismo valor dado a la altura de la línea. No creo que sea necesario establecer la altura, pero si la altura de la línea por sí sola no funciona, probablemente la solución sea la configuración de la altura del elemento.

<div id="parent">
    <div id="child">Text here</div>
</div>

#child {
    line-height: 200px;
}

Lo anterior funciona en todos los navegadores, sin embargo, solo funcionará para una sola línea de texto. Si su texto podría ajustarse a una segunda línea, debe usar un método diferente. El valor de 200 px arriba es arbitrario. Puede usar cualquier valor que desee siempre que sea mayor que el tamaño de fuente que se ha establecido.

Hay un pequeño problema con este método en el que debe tener cuidado al usar el acceso directo para la propiedad de fuente. Este método se basa en que establezca la altura de línea como un valor mayor que el tamaño de fuente. Cuando utiliza el acceso directo a la fuente, cualquier propiedad que no configure específicamente se establece en su valor predeterminado. Con el alto de línea, el valor predeterminado es 1. Si usa el acceso directo de fuente, solo asegúrese de establecer explícitamente el alto de línea en el interior.

Centrar verticalmente un elemento imagen utilizando line-height

¿Qué pasa si el contenido que quieres centrado es una imagen? ¿Funcionará este método? La respuesta es sí con una línea adicional de CSS.

<div id="parent">
    <img src="image.png" alt="" />
</div>

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

Establece la altura de la línea como lo hicimos anteriormente (deberá ser mayor que la altura de la imagen) y luego establece la alineación vertical: en el centro de la imagen.

4. Método de tabla CSS

Anteriormente mencioné que la alineación vertical se aplica a las celdas de la tabla, lo que nos lleva a este método. Mostraremos nuestros elementos como tabla y celda de tabla y luego utilizaremos la propiedad de alineación vertical para centrar el contenido verticalmente.

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
     display: table;
}

#child {
    display: table-cell;
    vertical-align: middle;
}

Configuramos el div primario para que se muestre como una tabla y el div secundario para que se muestre como una celda de tabla. Entonces podemos usar la alineación vertical en el div hijo y establecer su valor en medio. Cualquier cosa dentro de este div hijo estará centrada verticalmente.

A diferencia del método anterior, el contenido puede ser dinámico ya que el div crecerá con lo que se coloca dentro. La desventaja de este método es que no funciona en versiones anteriores de IE, aunque hay una solución, que es agregar display: inline-block al elemento secundario.

#child {
    display: inline-block;
}

5. Posicionamiento absoluto y margen negativo.

Este es el método que más navegadores soportan para centrar verticalmente un elemento HTML.

Este método funciona para elementos de nivel de bloque y también funciona en todos los navegadores. Requiere que establezcamos la altura del elemento que queremos centrar.

En el siguiente código, estoy centrando al hijo tanto vertical como horizontalmente usando este método.

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
    position: relative;
}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Comenzamos colocando los divisores padre e hijo. A continuación, establecemos los valores superior e izquierdo del hijo en un 50% cada uno, que sería el centro del padre. Sin embargo, esto establece que la esquina superior izquierda esté en el centro, por lo que no hemos terminado.

Necesitamos mover al hijo hacia arriba (la mitad de su altura) y hacia la izquierda (la mitad de su ancho) para que su centro sea el que se encuentra en el centro del elemento padre. Es por eso que necesitamos saber la altura (y aquí el ancho) del elemento hijo.

Para hacer eso, le damos al elemento un margen negativo superior e izquierdo igual a la mitad de su altura y anchura.

A diferencia de los primeros 2 métodos, este está destinado a elementos de nivel de bloque. Funciona en todos los navegadores, sin embargo, el contenido puede superar su contenedor, en cuyo caso desaparecerá visualmente. Funcionará mejor cuando conozca las alturas y anchuras de los elementos.

El inconveniente de este método es que tenemos que trabajar con medidas fijas para el alto. Para centrar el contenedor hijo tenemos que restar la mitad de su altura y anchura con la propiedad margin-top y margin-left.

6. Posicionamiento absoluto y estiramiento

Este método no funcionará en IE7 y versiones inferiores.

Al igual que con el método anterior, este comienza configurando el posicionamiento en los elementos primarios y secundarios como relativos y absolutos respectivamente. A partir de ahí las cosas difieren.

En el siguiente código, una vez más he usado este método para centrar al elemento hijo tanto horizontal como verticalmente, aunque puede usar el método solo para centrar verticalmente.

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
position: relative;
}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

La idea con este método es tratar de hacer que el elemento hijo se estire a los 4 bordes estableciendo los valores superior, inferior, derecho e izquierdo en 0. Debido a que nuestro elemento hijo es más pequeño que nuestros elementos padres, no puede llegar a todos 4 aristas.

Sin embargo, establecer auto como el margen en los 4 lados hace que los márgenes opuestos sean iguales y muestra nuestro div hijo en el centro del div padre.

7. Relleno (padding) superior e inferior iguales

En el método anterior para centrar verticalmente un elemento HTML, permitimos que el navegador establezca automáticamente los márgenes del elemento secundario para que sean iguales.

Ahora  haremos algo similar y estableceremos explícitamente el relleno superior e inferior del elemento primario para que sea igual.

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

8. Centrar verticalmente con Transform:

<div class="padre-transform">
	<div>
	<h1>Continuar</h1>
	<h2>Subtitulo</h2> 
	</div>
</div>

.padre-transform{
  background: #A8C7D6;
  height: 100vh;
  min-height:600px;
}
 
.padre-transform > div{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 50%;
  text-align: center;
}

Con height: 100vh le indicamos que nuestro contenedor mida la altura de nuestro dispositivo. Si nuestro monitor mide 800px de altura está será la medida de nuestra capa.

Es muy importante agregar el atributo min-height para indicar una altura mínima. Ya que si cargamos este ejemplo en un móvil en apaisado la capa sólo mediría 320px de altura. Con min-height:600px nos aseguramos que nunca mida menos de 600px.

Para el hijo utilizamos position:absolute. Con top:50% y left:50% posicionamos la esquina superior izquierda de nuestra caja en el centro de la pantalla. Y con transform:translate(-50%,-50%).

Estos porcentajes hacen referencia a la medida de la caja. Es decir si la caja mide 500px de ancho, la estaríamos desplazando 250px a la izquierda. Si mide 100px de altura la desplazamos 50px hacia arriba. Con ello conseguimos posicionarla en el centro.