La forma que yo uso para centrar algo verticalmente, suponiendo que se conozca el tamaño exacto de la caja, es la siguiente:
- se asigna a la caja interior un desplazamiento superior del 50%, con lo que conseguimos que el borde superior de esa caja quede en el centro exacto.
- ahora le damos un margen superior negativo igual a la mitad del tamaño de la caja interior, de manera que se deplaza hacia arriba la mitad de su tamaño, con lo que tenemos el centro de la caja interior situado en el centro de la caja exterior (contenedora).
Te pongo un ejemplo de centrado horizontal y vertical al mismo tiempo:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Caja interior centrada</title>
<style type="text/css">
#caja1 { width: 200px;
height: 200px;
position: relative;
background-color: rgb(51, 153, 153);
}
#caja2 { width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
position: absolute;
left: 50%;
margin-left: -50px;
background-color: rgb(102, 204, 204);
}
</style>
</head>
<body>
<div id="caja1">Caja exterior
<div id="caja2">Elemento interior</div>
</div>
</body>
</html>
Mikel.