Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Alinear div al centro

Estas en el tema de Alinear div al centro en el foro de CSS en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 24/04/2016, 02:38
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 5 años, 2 meses
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
  #2 (permalink)  
Antiguo 26/04/2016, 21:23
 
Fecha de Ingreso: marzo-2016
Mensajes: 58
Antigüedad: 3 años, 10 meses
Puntos: 0
Respuesta: Alinear div al centro

Código CSS:
Ver original
  1. @charset "UTF-8";
  2. .Fondo{
  3.     width: 100vw;
  4.     height: 100vh;
  5.     position:fixed;
  6.     padding: 32.2vh 35.382vw;
  7.     vertical-align: middle;
  8.     background: fixed url(http://cdn3.computerhoy.com/sites/computerhoy.com/files/styles/fullcontent/public/novedades/webassembly.jpg?itok=uvuzO-2m);
  9.     background-size: cover;
  10.  
  11. }
  12.     .PanelLogin{
  13.         position: absolute;
  14.         border: 1px solid white;    
  15.         background-color: white;
  16.         padding: 1% 80px;
  17.         margin:-65px -69px;
  18.         display: inline-block;
  19.         text-align: center;
  20.         box-shadow: 0px 0px 50px 50px rgba(0,0,0,.25);
  21.     }
  22.         .PanelLoginTipo1{
  23.             font-family: "Open Sans";
  24.             width: 25vw;
  25.             display: block;
  26.             text-align:center;
  27.                              }
  28.         .PanelLoginTipo2{  
  29.             font: 600 20px "Open Sans";
  30.             color: #0072c6;
  31.             padding-bottom: 3vh;
  32.             text-align:center;
  33.             width: 25vw;
  34.             display: block;
  35.  
  36.         }
  37.         .PanelLoginTipo3{
  38.             text-align: center;
  39.         }
  40. body{
  41.     margin: 0 auto;
  42. }
  43.  
  44. .btn{
  45.  
  46.     color:blue;
  47.     padding:4%;
  48.     margin:3%;
  49.     background: #FFFFFF;
  50.     border:transparent;
  51. }
  52. .btn:hover{
  53.  
  54.     background:#E6E6E6;
  55.     cursor:pointer;
  56. }
  57. .form-control{
  58.     padding:10px;
  59.     margin:10px;
  60. }
  61. .control-label{
  62.   font-family:arial;
  63. }


ahi esta el css3 lo modique para que se estuviera en el centro :) espero y te aya ayudado :)
__________________
Nadie aprende naciendo, todo se aprende con una meta propia :)

Etiquetas: alinear, background, centro, color, float, html, imagenes, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:10.