True Center Vertical y Horizontal CSS Div

¿Cómo es posible crear un centro de CSS div cross browser verdadero, por ejemplo, para usar dentro de una página de espera?

He intentado este truco css de 2007: cómo centrar exactamente un objeto en el centro, pero como puede ver en mi JSFiddle del código, no es 100% central.

HTML:

Text

CSS:

 .center{ position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; border:5px solid black; } 

Esa técnica requiere que el elemento tenga un ancho y una altura fijos. No está estableciendo el ancho y alto. Según el borde y los márgenes, para centrarlo, el ancho debería ser de 190 píxeles y la altura necesitaría 90 píxeles. El uso line-height y text-align en combinación con un ancho y una altura fijos hace que el texto y el borde estén centrados. Intentalo.

CSS

 .center{ position: fixed; top: 50%; left: 50%; width: 190px; height: 90px; line-height: 90px; text-align: center; margin-top: -50px; margin-left: -100px; border:5px solid black; } 

Puedes hacerlo con CSS puro:

 html { width: 100%; height: 100%; } body { min-width: 100%; min-height: 100%; } div.centeredBlueBox { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 300px; height: 200px; background-color: blue; } 

Es importante dar 300px concretos (por ejemplo: 300px ) y no derivados (como: auto o 30% ) para width y height .

 

por ejemplo

    
hallo

Esto es lo que hice

   Page Title    

Help me please

Espero que esto ayude.

Esa es mi solución:

 
//your content here

Funciona en muchos navegadores. Y no hay problema con el contenido agregado después del diseño.

Este es un ejemplo adicional con un setter de altura que creé para la alineación vertical de IE. El tramo extra tiene una alineación vertical: centro.

   
This is the Header content

My header of the vertical box

My Content

Establezca el tipo de display de DIV en table-cell . Luego puede usar la vertical-align normal, como un elemento TD .

 
Centered Text

Echa un vistazo a esto ; un artículo bastante inteligente.