Center Vertically with scaled content


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



Copy this code and paste it in your HTML
  1.  
  2. <div class="container">
  3. <div class="cell">
  4. <div class="content">
  5. </div>
  6. </div>
  7. </div>
  8.  
  9. .container {
  10. display: table;
  11. height: 100%;
  12. width: 100%;
  13. }
  14. .cell {
  15. display: table-cell;
  16. vertical-align: middle;
  17. /* For IE6/7 */
  18. position: relative;
  19. top:expression(this.parentNode.clientHeight/2 - this.firstChild.clientHeight/2 + " px");
  20. }
  21. .content {
  22. /* center horizontally */
  23. margin: 0 auto;
  24. width: 400px;
  25. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.