Centrar un DIV posicionado absolutamente

Para centrar un div, por muchos es conocido el método de aplicarle un margen como sigue:

margin: 0 auto;

Sin embargo este método no nos servirá si el div que queremos centrar está posicionado absolutamente. En el caso más básico, podemos tener lo siguiente:

<body>
   <div style="position:absolute"></div>
</body>

La solución para estos casos pasa por situarlos en el centro de la pantalla (50%) con un margen a la izquierda negativo de la mitad de su ancho. Digamos que nuestro DIV tiene 600px de ancho, para centrarlo:

<body>
   <div style="position:absolute;width:600px;top:0;left:50%;margin-left:-300px;"></div>
</body>

Pero podemos ir un poco más allá. Hasta aquí hemos supuesto que conocemos el ancho del DIV que queremos centrar, pero no siempre es así, en ocasiones, el contenido de un DIV es dinámico y cambiará constantemente. El método anterior no nos servirá. La solución aquí es meter nuestro div dentro de un contenedor que nos ayudará a centrarlo:

<body>
   <div style="position:absolute;left:50%;">
      <div style="position:relative;left:-50%;"></div>
   </div>
</body>

Y así quedará perfectamente centrado en la página

Altura de un DIV igual que la de sus hijos

Hoy vuelvo con un poco de CSS. Es una cuestión que se me ha planteado en muchas ocasiones: digamos que tienes un div contenedor de otros dos o tres divs con una altura no definida que varía en función del contenido que le vayamos a meter. Estos divs estarán colocados con un float para que tengan la forma de columnas y queden uno junto al otro. Un ejemplo de esta estructura sería:

<div id="contenedor">
    <div id="columna1">contenido de altura variable</div>
    <div id="columna2">
       <div id="sub1">mas contenido</div>
       <div id="sub2">mas contenido</div>
       ...
    </div>
<div>

Cómo he comentado, si a los divs internos (columna1 y columna2) les aplicamos un estilo para que "floten" quedarán en forma de columna: float:left;
Sin embargo tendremos un problema con el contenedor que no se adaptará a la altura de los hijos y se quedará con una altura de 0

Para solucionar esto, hay que añadir un último div a la estructura que no tenga la propiedad float y con un clear:both como se ve a continuación:

<div style="clear:both;"></div>

De esta manera quedará solucionado el problem y el div padre se quedará adaptado a la altura de la más alta de las dos columnas

Visto en muchos sitios, pero cogido de aquí