Tema: Centrar div justo en medio de la página
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/01/2016, 18:12
diegoguerrero
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 9 años, 10 meses
Puntos: 5
Centrar div justo en medio de la página
Tengo la siguiente web y su correspondiente código y lo que busco hacer es alinear el div .PanelLogin justo en medio de la página vertical y horizontalmente. ¿Cómo podría hacerlo, a ser posible con % y no px? Muchas gracias!!

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Documento sin título</title>
  6. <link rel="stylesheet" href="Estilos/Estilos.css">
  7. </head>
  8. <body>
  9. <style>
  10. body{
  11.     margin: 0;
  12.     font-family: "Open Sans";
  13. }
  14. .ImagenFondoBody{
  15.     background-image: url(Imagenes/HeroLimpia.jpg);
  16.     -webkit-filter: blur(25px);
  17.     -moz-filter: blur(25px);
  18.     -o-filter: blur(25px);
  19.     -ms-filter: blur(25px);
  20.     filter: blur(25px);
  21.     width:100%;
  22.     z-index: -1;
  23.     text-align:center;
  24. }
  25. .PanelLogin{
  26.     position: absolute;
  27.     height: 350px; 
  28.     width: 350px;
  29.     margin-top: 200px;
  30.     margin-left: -450px;
  31.     left: 50%;
  32.     z-index: 2;
  33.     padding: 50px;
  34.     opacity: 1;
  35.     border-radius: 30px;
  36.     background-color: #FFF;
  37. }
  38. .Arriba{
  39.     text-align:center;
  40.     border: 1px solid lightblue;
  41.     width: 100%;
  42. }
  43. .TituloColegio{
  44.     text-align: center;
  45.     font: 600 20px "Open Sans";
  46.     color: #0072C6;
  47. }
  48. .Abajo{
  49.     border: 1px solid lightgreen;
  50.     width: 100%;
  51. }
  52. </style>
  53. <div class="PanelLogin">
  54.     <div class="Arriba">    
  55.         <img src="Imagenes/LogoColegio.jpg" alt="LogoColegio">
  56.         <div class="TituloColegio">La Inmaculada-Marillac</div>
  57.     </div>
  58.     <div class="Abajo">
  59.         <label class="InputLabel">Nombre de usuario</label>
  60.         <input type="text" class="InputText" value="Nombre de usuario">
  61.     </div>
  62. </div>
  63. <img src="Imagenes/HeroLimpia.jpg"  class="ImagenFondoBody" alt="AA">
  64.  
  65. </body>
  66. </html>
Imagen: http://www.subeimagenes.com/img/capt...16-1605755.png