Posted By

distribuida on 09/01/11


Tagged


Versions (?)

Centrar capas verticalmente


 / Published in: CSS
 

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

  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%;}

Report this snippet  

You need to login to post a comment.