Advanced Search

Center Vertically with scaled content

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

Expand | Embed | Plain Text

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.