Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/04/2016, 01:38
diegoguerrero
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 10 años
Puntos: 5
Alinear div al centro

Hola!

Tengo el código que les dejo debajo de HTML y CSS pero es que lo que yo quiero es centrar el div blanco (.PanelLogin) en el total centro de la página, pero no se deja. La propiedad que mejor lo centraba era transform: translate (-50%,-50%) pero me dejaba el texto de dentro borroso. Por cierto, el cuadro tiene anchura prefijada pero no altura prefijada.

¡Gracias!
HTML

Código HTML:
Ver original
  1. <div class="Fondo">
  2.             <div class="PanelLogin">
  3.                 <form action="Acceder.php" method="post">
  4.                     <div class="PanelLoginTipo2">
  5.                         <font>Plataforma Avantia<br>Colegio Madrid</font>
  6.                     </div>
  7.                     <div class="PanelLoginTipo1 form-group label-floating">
  8.                         <label class="control-label">Nombre de usuario</label>
  9.                         <input name="NombreUsuario" class="form-control" type="text">
  10.                     </div>
  11.                     <div class="PanelLoginTipo1 form-group label-floating">
  12.                         <label class="control-label">Contraseña</label>
  13.                         <input name="ClaveUsuario" class="form-control" type="password">
  14.                     </div>
  15.                     <div class="PanelLoginTipo3 FaseLogin">
  16.                         <button type="submit" class="btn">Entrar a la plataforma</button>
  17.                     </div>
  18.                 </form>
  19.             </div>
  20.         </div>
CSS

Código CSS:
Ver original
  1. @charset "UTF-8";
  2. .Fondo{
  3.     width: 100vw;
  4.     height: 100vh;
  5.     position: relative;
  6.     padding: 32.2vh 35.382vw;
  7.     vertical-align: middle;
  8.     background: fixed url(../../Imagenes/HeroLogin.jpg);
  9.     background-size: cover;
  10. }
  11.     .PanelLogin{
  12.         position: absolute;
  13.         border: 1px solid white;   
  14.         background-color: white;
  15.         padding: 2vh 2vw;
  16.         display: inline-block;
  17.         box-shadow: 0px 0px 50px 50px rgba(0,0,0,.25);
  18.     }
  19.         .PanelLoginTipo1{
  20.             font-family: "Open Sans";
  21.             width: 25vw;
  22.             display: block;
  23.         }
  24.         .PanelLoginTipo2{  
  25.             font: 600 20px "Open Sans";
  26.             color: #0072c6;
  27.             padding-bottom: 3vh;
  28.             text-align: center;
  29.             width: 25vw;
  30.             display: block;
  31.         }
  32.         .PanelLoginTipo3{
  33.             text-align: center;
  34.         }
  35. body{
  36.     margin: 0 auto;
  37. }
Imagen final actualmente

__________________
Experto: aunque no sepas hacer algo, los novatos te pedimos que nos digas algo aunque sepas que no acertarás