Buenas, estoy dándole ahora al tema de programación web (PHP, CSS...) y se me ha presentado un problema que no he sido capaz de solucionar y que os comento.
Tengo un DIV con borde el cual tiene el alto y ancho automático para que se ajuste al contenido y no consigo que el jodido se centre en la pantalla. Sólo he conseguido que se centre si le pongo el tamaño de forma manual, pero me gustaría que se centrara siendo el tamaño automático.
¿Hay alguna solución? Gracias de antebrazo.
#2 Con eso consigo centrarlo si le pongo el tamaño de forma manual, pero a la hora de ponerlo en automático se me queda como en la captura (como ves se extiende raramente xD):
Y lo que busco sería algo así, con el tamaño automático y centrado:
Este es el CSS del DIV:
#content {
height: auto;
width: auto;
text-align: center;
margin: 300 auto;
border: 2px solid #6897C0;
box-shadow: black 0.1em 0.1em 0.2em;
}
Hazlo con jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
jQuery(document).ready(function() {
$('#content').center();
});
</script>
Pon esto antes del </head>
Edit: el src del primer script es http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js (que no se ve bien).
#4 Todavía no he llegado a esos niveles, pero se agredece 
De todas formas, voy a probarlo a ver si doy con la tecla 
Es que sin saber el ancho y el alto fijo del div que yo sepa (que me corrijan si me equivoco) no se puede centrar vertical y horizontalmente en la pantalla.
Yo creo que tirar de jquery en esta situación es un poco excesivo ¿no? .. me refiero a nivel de recursos para algo que debería poder hacerse fácilmente con css.
Tengo algunas preguntas...
¿Te pasa en todos los navegadores?
¿Has probado en lugar de poner width y height auto poner min-height:1px y min-width:1px?
¿Puede que estés heredando estilos de otra capa?
¿Has probado a meterle un text-align:center a la capa padre?
y otra que molaría...
¿Tienes esto colgado online para trastearlo con firebug? xD
#7 claro es algo que debería poder hacerse fácilmente con css, pero no es así. Porque el problema está en que el div no tiene un alto y un ancho fijo. Me ha pasado muchas veces y ese script es lo que utilizo, claro que está más enfocado para realizar "popups" con capas o ampliaciones de imágenes que cargan en el div y como bien dices es un poco excesivo para este caso xD
#8 quita el "margin: 300 auto;" que es lo que sobra, a mi me funciona :S
#10 si consigues centrar horizontal y verticalmente un div sin ancho ni alto fijo te lo copio xD
Lo tengo! 
Mi problema era como hacer que un div envolviera su contenido sin extenderse hasta ocupar el 100% sin utilizar float:left, ya que float:left pues eso.. lo manda pa la left xD
Así que para darle ese comportamiento pero sin que flote, he utilizado la propiedad display:inline, ya que por defecto un div se comporta como un elemento de bloque y tiende a abarcar todo lo que puede.
Una vez hecho esto, sólo hay que decirle al padre (en este caso el body), que tenga text-align:center, y a ser el div contenido un elemento inline pues eso, lo mete al centro.
Sirve para este caso concreto, no para popups, que puedo ver justificable el uso de JS. Aún así, no veo por qué no se le puede dar un ancho fijo a un formulario de login 
#8 Dime si te funciona, yo lo tengo aquí en marcha en mi máquina y funcionando.
#11 pues tiene mucho sentido, como tu dices, al comportarse como bloque con un inline debe abarcar toda lo posible.
Sexy
No se.. pero para centrar un div dentro de un contenedor...
<div id="contenedor" style="margin: 0 auto;">
<div id="login" style="margin: 0 auto;"></div>
</div>Con esto ambos divs deberían de estar centrados, uno respecto a la ventana del navegador, y el segundo respecto al div contenedor.
¿Sin definir altos ni anchos? ¿Has probado a renderizar ese código html? a mí por lo menos me salen dos cajas de 100% de ancho.
#16 Bueno, vale, en ambos casos puedes poner anchos eh, es lo que siempre hago yo:
Primer ancho 960, segundo el que te parezca.
#17 No, si por poder, puedes. Pero ya no contesta a la duda de cómo centrar divs con alto y ancho automático