CSS div pantalla completa con el texto en el medio

tengo una clase css definido para que pueda hacer un div que usar toda ventana del navegador, la regla es la siguiente:CSS div pantalla completa con el texto en el medio

.fullscreenDiv { 
    background-color: #e8e8e8; 
    width: 100%; 
    height: auto; 
    bottom: 0px; 
    top: 0px; 
    left: 0; 
    position: absolute; 
}

Ahora quiero el texto dentro de el divisor debe estar en el centro exacto de la pantalla, de modo que alinee verticalmente el centro y horizontalmente alinee el centro, pero parece que no puedo encontrar la manera correcta de hacerlo.

Solo necesita trabajar en navegadores basados en webkit.

Ya intenté agregar un elemento P en el interior con display establecido en table-cell (una forma común de centrar el texto) sin suerte.

¿Alguna sugerencia?

Fuente

2012-05-22 Juan Alberto López Cavallotti

'' 'text-align: center; posición: absoluta; parte superior: 50%; parte inferior: 50%; ancho: 100%; '' '- Esto debería funcionar mejor que la respuesta aceptada - Agregue los estilos a su bit de texto – James111

El enfoque estándar es dar al centrada elemento de dimensiones fijas, y colocarlo en absoluto:

<div class='fullscreenDiv'> 
    <div class="center">Hello World</div> 
</div> 

.center { 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    top: 50%; 
    left: 50%; 
    margin-left: -50px; /* margin is -0.5 * dimension */ 
    margin-top: -25px; 
}

DEMO

Fuente

2012-05-22 17:53:11 paislee

Estoy intentando con esto, pero si quisiera centrar el texto en el medio del" centro " "Div también? –

@ JuanAlbertoLópezCavallotti Solo estarías reproduciendo el problema. Agregar 'text-align: center' a la clase' center' te llevaría hasta la mitad. Si solo tiene 1 línea de texto, puede agregar 'line-height: 50px', o cualquiera que sea la altura del contenedor centrado. Eso se centrará verticalmente también. – paislee

No estoy seguro si el elemento adicional fue necesario pero aquí tiene: http://jsfiddle.net/wzSmc/1/ – FelipeAls

text-align: center se centrará horizontalmente como para verticalmente ponerlo en un lapso y darle un css de margin:auto 0; (es probable que también tiene que dar el lapso de una propiedad display: block)

Fuente

2012-05-22 17:51:53 Ryan

No existe una solución pura de CSS para este problema clásico.

Si usted quiere lograr esto, se tienen dos soluciones:

utilizando una tabla (feo, no semántica, pero la única manera de alinear verticalmente las cosas que no son una sola línea de texto)
Escuchando window.resize y posicionamiento absoluto

EDITAR: cuando digo que no hay una solución, me tomo como una hipótesis que no se sabe en una dvance el tamaño del bloque al centro. Si usted lo sepa, la solución de Paislee es muy bueno

Fuente

2012-05-22 17:54:16

Las obras respuesta aceptada, pero si:

no sabes las dimensiones del contenido
el contenido es dinámico
quiere estar preparada para el futuro

uso esto:

.centered { 
    position: fixed; /* or absolute */ 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

Más información sobre el contenido centrado en este excelente CSS-Tricks article.

Además, si no es necesario para soportar los navegadores antiguos: un flex-cuadro hace de este un juego de niños:

.center{ 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Otra gran guía sobre flexboxs de trucos CSS; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Fuente

2014-12-23 04:41:03 agconti

CSS div pantalla completa con el texto en el medio

Respuesta

Cuestiones relacionadas