Posted By

ishottheserif on 08/03/09


Tagged

center vertical horizonal


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

vali29
catchatpas
silentbob84
Priestd09


The simplest way to horizontally and vertically center a DIV


 / Published in: CSS
 

URL: http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div

  1. /* CSS Document */
  2. .centered_div {
  3. width: 100px;
  4. height: 100px;
  5. position: absolute;
  6. top: 50%;
  7. left: 50%;
  8. margin-left: -50px;
  9. margin-top: -50px;
  10. background: red;
  11. }
  12.  
  13. Here is another example with size 500 x 200 px.
  14.  
  15. /* CSS Document */
  16. .centered_div {
  17. width:500px;
  18. height: 200px;
  19. position: absolute;
  20. top: 50%;
  21. left: 50%;
  22. margin-left: -250px;
  23. margin-top: -100px;
  24. background: red;
  25. }

Report this snippet  

You need to login to post a comment.