Gracias por las respuestas.
Mi pregunta no iba por ahí (iba más por donde ha contestado drvy). Me refiero, que poniendo padding-top: 50%; según el código éste debería centrar el div verticalmente de forma automática, pues le estás diciendo que tenga un padding de la mitad del body respecto al borde superior. Sin embargo colocas eso y se te pone casi abajo del todo, como si hubieras colocado un padding-top: 85%;
Entonces, no entiendo exactamente como funciona el padding con porcentajes. Por qué poniéndole 50% me lo coloca mucho más abajo de la mitad de la página.
Asimismo, poniendo padding-left: 50%; te lo va a tirar muy hacia la derecha, demasiado. Para centrarlo con porcentajes tendrías que colocar aproximadamente padding-left: 25%;
Eso es lo que no entiendo, que poniéndole un cuarto de lo que debería ser el 100%, te lo ponga en el centro, y que poniéndole la mitad, que es lo que debería funcionar (50%) se vaya tanto hacia el extremo.
Estas lineas no las entendí, por cierto:
/* Maximo width 80%. Se le resta la mitad para centrar. */
width:80%; margin-left:-40%;
Por qué se le coloca un width del 80% y luego se le resta la mitad?
Marcando un width se puede centrar muy facilmente, así es. Colocando width: 400px y margin: auto se centra por si mismo horizontalmente.
Sin embargo el problema viene cuando lo quieres centrar verticalmente o cuando no quieres que el div tenga unas medidas fijas.. es decir, si yo quiero que se amplie conforme se le coloque contenido y se centre al mismo tiempo tendría que recurrir a una tabla? Hablo de centrar un div, no el texto de dentro. El texto de dentro se puede centrar con text-align, pero lo centras dentro del div, no centras el div.
Otra forma de centrarlos es recurrir a javascript, coger las medidas de la página desde el navegador de esa persona y dividirlas entre dos y tal.. pero yo quería saber si había una forma de centrar vertical y horizontalmente con CSS sin tener que darle un width y un height concreto al div, es decir, que éste pueda ampliarse.
Eso es posible??
Un saludo y muchas gracias por la ayuda!
Aquí está con paddings, y si el resultado se ve a pantalla completa comprobaréis que no centra con el 50%.
http://jsfiddle.net/HK4gk/1/
Autor
En línea
- 
