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