Si es una línea de texto y / o imagen, entonces es fácil de hacer. Solo usa:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
Eso es. Si puede ser varias líneas, entonces es algo más complicado. Pero hay soluciones en http://pmob.co.uk/ . Busque "alineación vertical".
Como tienden a ser hacks o agregar divs complicados ... Usualmente uso una tabla con una sola celda para hacerlo ... para hacerlo lo más simple posible.
Actualización para 2020:
A menos que necesite que funcione en navegadores anteriores como Internet Explorer 10, puede usar flexbox. Es ampliamente compatible con todos los principales navegadores actuales . Básicamente, el contenedor debe especificarse como un contenedor flexible, junto con el centrado a lo largo de su eje principal y transversal:
#container {
display: flex;
justify-content: center;
align-items: center;
}
Para especificar un ancho fijo para el elemento secundario, que se denomina "elemento flexible":
#content {
flex: 0 0 120px;
}
Ejemplo: http://jsfiddle.net/2woqsef1/1/
Para reducir el contenido, es aún más simple: simplemente elimine el flex: ... línea del elemento flexible y automáticamente se encogerá.
Ejemplo: http://jsfiddle.net/2woqsef1/2/
Los ejemplos anteriores se han probado en los principales navegadores, incluidos MS Edge e Internet Explorer 11.
Una nota técnica si necesita personalizarlo: dentro del elemento flexible, dado que este elemento flexible no es un contenedor flexible en sí mismo, la antigua forma de CSS sin flexbox funciona como se esperaba. Sin embargo, si agrega un elemento flexible adicional al contenedor flexible actual, los dos elementos flexibles se colocarán horizontalmente. Para hacerlos colocados verticalmente, agregue el flex-direction: column;al contenedor flexible. Así es como funciona entre un contenedor flexible y su inmediato elementos secundarios .
Existe un método alternativo para centrar: no especificando centerla distribución en el eje principal y transversal para el contenedor flexible, sino que especifica margin: autoen el elemento flexible para ocupar todo el espacio extra en las cuatro direcciones, y los márgenes distribuidos uniformemente hará que el elemento flexible se centre en todas las direcciones. Esto funciona excepto cuando hay múltiples elementos flexibles. Además, esta técnica funciona en MS Edge pero no en Internet Explorer 11.
Actualización para 2016/2017:
Se puede hacer con más frecuencia transformy funciona bien incluso en navegadores antiguos como Internet Explorer 10 e Internet Explorer 11. Puede admitir múltiples líneas de texto:
position: relative;
top: 50%;
transform: translateY(-50%);
Ejemplo: https://jsfiddle.net/wb8u02kL/1/
Para encoger el ancho:
La solución anterior utilizó un ancho fijo para el área de contenido. Para usar un ancho retractilado, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Ejemplo: https://jsfiddle.net/wb8u02kL/2/
Si se necesita el soporte para Internet Explorer 10, entonces flexbox no funcionará y el método anterior y el line-heightmétodo funcionarían. De lo contrario, flexbox haría el trabajo.
text-align:centerque no hace la "parte vertical"?