Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Vertical Centering Block Level Elements


 / Published in: CSS
 

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div. This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

  1. The HTML:
  2.  
  3. 1 </pre>
  4. 2 <div id="content">your content here</div>
  5. 3 <pre>
  6.  
  7. The CSS:
  8.  
  9. 1 div#content {
  10. 2 position: absolute;
  11. 3 top: 50%;
  12. 4 height: 500px;
  13. 5 margin-top: -250px
  14. 6 }

Report this snippet  

You need to login to post a comment.