advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.