Advanced Search

The simplest way to horizontally and vertically center a DIV

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.