[SOLUCIONADO] Centrar div justo en medio de la página

diegoguerrero · #1 (**permalink**) 16/01/2016, 18:12

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<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="Estilos/Estilos.css">
</head>
<body>
<style>
body{
    margin: 0;
    font-family: "Open Sans";
}
.ImagenFondoBody{
    background-image: url(Imagenes/HeroLimpia.jpg);
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
    width:100%;
    z-index: -1;
    text-align:center;
}
.PanelLogin{
    position: absolute;
    height: 350px; 
    width: 350px;
    margin-top: 200px;
    margin-left: -450px;
    left: 50%;
    z-index: 2;
    padding: 50px;
    opacity: 1;
    border-radius: 30px;
    background-color: #FFF;
}
.Arriba{
    text-align:center;
    border: 1px solid lightblue;
    width: 100%;
}
.TituloColegio{
    text-align: center;
    font: 600 20px "Open Sans";
    color: #0072C6;
}
.Abajo{
    border: 1px solid lightgreen;
    width: 100%;
}
</style>
<div class="PanelLogin">
    <div class="Arriba">    
        <img src="Imagenes/LogoColegio.jpg" alt="LogoColegio">
        <div class="TituloColegio">La Inmaculada-Marillac</div>
    </div>
    <div class="Abajo">
        <label class="InputLabel">Nombre de usuario</label>
        <input type="text" class="InputText" value="Nombre de usuario">
    </div>
</div>
<img src="Imagenes/HeroLimpia.jpg"  class="ImagenFondoBody" alt="AA">
 
</body>
</html>

Imagen: http://www.subeimagenes.com/img/capt...16-1605755.png

g3kdigital · #2 (**permalink**) 16/01/2016, 21:37

Hay distintos métodos para lograrlo, mira este articulo:

https://escss.blogspot.com/2012/05/c...6-maneras.html

El más recomendado es con flexbox

Código CSS:

Ver original.padre 
{
display: flex;
min-height: 100vh;
margin: 0;
}
 
.hijo
{
margin: auto;
}

Y el que me gusta mucho usar es con transform:

Código CSS:

Ver original.padre
{
position:relative;
}
 
.hijo 
{
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

Pero no funciona para todos lo casos (y créeme son muchos) por lo que lo mejor es que conozcas todas las formas posibles y cual se adapta mejor a las necesidades de tu proyecto.