Tema: Centrar div vertical y horizontalmente dentro de otro
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 27/07/2011, 09:19
Avatar de aganglada
aganglada
 
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 3
Respuesta: Centrar div vertical y horizontalmente dentro de otro
Cita:
Iniciado por andresdzphp Ver Mensaje
A mi me gusta aprender con ejemplos y aquí te dejo uno de como centrar verticalmente un div.

Código CSS: 
Ver original
  1. <html>
  2. <head>
  3. <title>Centrado Vertical con CSS</title>
  4.  
  5. <style type="text/css">
  6.  
  7. .contenedor {
  8.     top: 0; 
  9.     left: 0; 
  10.     width: 100%; 
  11.     height: 100%;}
  12.     
  13. .contenedor[class] {
  14.     position: fixed; 
  15.     display: table;}
  16.     
  17. .centrado {
  18.     position: absolute; 
  19.     top: 50%;}
  20.  
  21. .centrado[class] {
  22.     display: table-cell; 
  23.     vertical-align: middle;
  24.     text-align: center; 
  25.     position: static;
  26.     }
  27.     
  28. .contenido {
  29.     width: 200px;
  30.     height: 200px;
  31.     border: 1px solid #000;
  32.     margin: 0 auto;
  33.     position: relative;
  34.     top: -50%;
  35.     }
  36.     
  37. </style>
  38.  
  39. </head>
  40. <body>
  41. <div class="contenedor">
  42.     <div class="centrado">
  43.         <div class="contenido">
  44.         <p>Centrado vertical y horizontal</p>
  45.  
  46.         </div>
  47.     </div>
  48. </div>
  49. </body>
  50.  
  51. </html>
Muchas Gracias! :)