[SOLUCIONADO] Centrar verticalmente un section

nh2006 · #1 (**permalink**) 28/06/2013, 14:49

Hola amigos,

Desde hace ratos estoy buscando una solución al siguiente problema:

Resulta que tengo un login con una estructura similar a lo siguiente:

Código HTML:

Ver original<body>
     <header>
            ...
     </header>
     <section>
            ...
     </section>
     <footer>
            ...
     <footer>
<body>

dentro del section tengo el formulario, pero lo que necesito es que ese section se encuentre alineado verticalmente y no encuentro cómo.

Ya probé colocar dentro otro section y a este último darle un display:table-cell junto con el vertical-align: middle mientras que al primero un display:table, pero nada.

Me da la impresión como que el body no se ajusta al tamaño de la ventana.

También he probado con darle un margin: 11% 0, al section principal pero eso no lo deja alineado al centro del documento.

¿Cómo podría resolver esto?.

Gracias desde ya.

Saludos

pzin · #2 (**permalink**) 28/06/2013, 14:54

¿El problema es la alineación vertical o que section no toma el tamaño adecuado?

nh2006 · #3 (**permalink**) 28/06/2013, 15:11

Hola pzin,

Gracias por la pronta respuesta, la verdad no lo sé. El footer lo tengo con position:fixed y bottom: 0, por lo que lo tengo pegado prácticamente al borde inferior de a la ventana, así es como me han dado el diseño.

Solamente el secction no encuentro cómo ubicarlo centrado verticalmente y no me explico el porqué.

Saludos

pzin · #4 (**permalink**) 28/06/2013, 16:20

Es que a priori con table-cell te debería de funcionar:

Código CSS:

Ver originalsection {
  display: table-cell;
  vertical-align: middle;
}

Pero claro, si section no va desde el header hasta el footer, entonces el contenido estará centrado, pero no tiene la altura indicada.

Si no, aparte de eso, prueba con algo como:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}
 
header {
  height: 100px;
}
 
footer {
  height: 50px;
}
 
section {
  height: calc(100% - 150px); /* header + footer */
}

nh2006 · #5 (**permalink**) 29/06/2013, 11:36

Gracias por la ayuda pzin,

Probé con ambas opciones y no me funcionó, luego hice lo siguiente:

Código CSS:

Ver originalsection{
     margin: 11% 0;
}

Quedó mas o menos, pero de último encontré esta solución: http://crea-t.net/blog/centrar-conte...na-pagina-html.

Al final me queda algo así:

Código CSS:

Ver originalsection{        
    margin-top: -11.5em;    /* la mitad del alto del objeto a centrat */
    margin-left: -15em;     /* la mitad del ancho del objeto a centrar */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30em;            /* ancho del objeto a centrar */
    height: 23em;           /* alto del objeto a centrar */
}

Prefiero trabajar com em y no con px por lo de los múltiples dispositivos.

No se si sea la mejor solución pero de momento al redimencionar la ventana del navegador va muy bien.

Gracias por el apoyo

pzin · #6 (**permalink**) 29/06/2013, 11:49

No es buena idea trabajar con posiciones absolutas. Y la combinación posición absoluta + márgenes negativos suele ser mala también. Cuando la altura y la anchura sea pequeña, section va a salir de la ventana y quedará oculto.

Intenta con algo así:

Código HTML:

Ver original<header></header>
<section>
  <div></div>
</section>
<footer></footer>

Código CSS:

Ver originalhtml, body {
  height: 100%;
}
header {
  height: 100px;
}
footer {
  height: 50px;
}
section {
  display: table;
  width: 100%;
  height: calc(100% - 150px);
}
section > div {
  display: table-cell;
  vertical-align: middle;
}

Funcionar funciona: http://jsfiddle.net/EAMR4

nh2006 · #7 (**permalink**) 01/07/2013, 08:26

Excelente!!!

Ha funcionado, limpié mi código HTML y ajusté tu CSS al mío y funciona.

Gracias por la ayuda pzin.

Saludos