Advanced Search

Posted By

distribuida on 09/01/11

Tagged

Versions (?)

Last Edited at 09/01/11 09:18pm

Statistics

Viewed 166 times
Favorited by 0 user(s)

Related snippets

423
capas que tapan selects mediante iframe
462
DIV CENTRADO HORIZONTAL Y VERTICALMENTE
612
Cómo manipular la altura de capas paralelas con JQuery

Centrar capas verticalmente

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*ESTRUCTURA HTML*/
  2. /*
  3. <div id="contenedor">
  4.     <div id="centrado">Contenido para alinear verticalmente</div>
  5. </div>
  6. */
  7.  
  8. /* -------- USANDO LINE-HEIGHT ------- */
  9. /*Sólo válido para líneas de texto*/
  10. #centrado {line-height: 200px;}
  11.  
  12.  
  13. /* -------- USANDO DISPLAY + VERTICAL-ALIGN ------- */
  14. /*Las dimensiones de la capa se asignan al contenedor*/
  15. #contenedor {display: table; height:200px;}
  16. #centrado {display: table-cell; vertical-align: middle;}
  17.  
  18.  
  19. /* -------- USANDO POSITION + MARGIN ------- */
  20. #contenedor {position: relative;}
  21. #centrado { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%;}

URL: http://www.katharsix.com/centrar-verticalmente-con-css-6-formas-diferentes-de-lograrlo

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.