Cómo centrar elementos con CSS y no morir en el intento

www.campusMVP.es
Es necesario colocarlo con posición
absoluta dentro de su padre.El padre
Elementos en línea text-align: center; El elemento de bloque debe
debe tener pues un sistema de
coordenadas disponible (posición
tener un ancho especificado.
absoluta o relativa).
Es más habitual incluso
Luego el elemento que queremos
expresarlo como:
centrar verticalmente se coloca a la
margin: 0 auto;
margin-left: auto; mitad de la altura del padre, y con un
HORIZONTALMENTE Elementos de bloque margin-right: auto;
margen superior de la mitad de su
altura.

#padre {
¡Empieza position: relative;
aquí! Elementos de bloque Elemento de altura fija }

#elemento {
position: absolute;
top: 50%;
margin-top: -mitadAltura;
¡Quiero CENTRAR un elemento }
VERTICALMENTE Elemento de altura desconocida
HTML con CSS!

#contenedor {
Texto de elementos position: relative;
}
en línea
#elemento {
position: absolute;
top: 50%;
Elementos en línea dentro El texto ocupa El texto ocupa una transform: translateY(-50%);
Revisi ón técni ca: Natal ia Matesanz, Pablo Iglesias (@piglesi as)

}
de otros elementos varias líneas sola línea

Muy parecido al anterior, pero en este caso, al no

saber la altura, tenemos lo colocamos en el
centro de su contenedor y luego lo desplazamos
Autor: José Manuel Alarcón (@jm_alarcon)

#contenedor { verticalmente en sentido negativo (hacia arriba)

display:table; Altura fija Altura no establecida Altura fija enla misma proporción.

}
#elemento {
Hay que hacer que se
display: table-cell; comporte como la celda
vertical-align: middle; #elemento { de una tabla para poder
#elemento { #elemento {
usar vertical-align .
} display: table-cell; padding-top: 50px; height: 50px;
vertical-align: middle; padding-bottom: 50px; line-height: 50px;
} Establecemos el } } Establecemos la altura
Hay que hacer que se comporte de la línea a la misma
como la celda de una tabla para mismo relleno altura que el propio
poder usar vertical-align . En este arriba y abajo elemento.
caso hay que cambiar también el
modo de visualización de su
elemento padre.