Advanced Search

Vertical & horizontal centering with CSS

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* VERTICALLY */
  2. div#splash {
  3. width: 300px;
  4. height: 200px;
  5. position: absolute;
  6. top: 50%;
  7. left: 50%;
  8. margin-top: -100px;
  9. margin-left: -150px;
  10. }
  11.  
  12. /* HORIZONTALLY (1) */
  13. body {text-align: center;}
  14.  
  15. div#content {
  16. width: 40%;
  17. margin: 0px auto;
  18. text-align: left;
  19. }
  20.  
  21. /* HORIZONTALLY (2) */
  22. div#content {
  23. position: absolute;
  24. left: 50%;
  25. width: 40%; /* could be in px as well */
  26. margin-left: -20%;
  27. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.