Advanced Search

Vertical Align in a div

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .wrap {
  2. display: table;
  3. height: 400px;
  4. #width: 175px; /* arbitrary width for IE only */
  5. #position: relative; /* for IE only */
  6. overflow: hidden;
  7. }
  8. .inner {
  9. #position: absolute; /* for IE only */
  10. #top: 50%; /* for IE only */
  11. display: table-cell;
  12. vertical-align: middle;
  13. }
  14. .content {
  15. #position: relative; /* for IE only */
  16. #top: -50%; /* for IE only */
  17. }
  18. .wrap, .content {border: 1px solid green;} /* just borders to see it */
  19. p {padding:5px;}
  20.  
  21.  
  22. <div class="wrap">
  23. <div class="inner">
  24. <div class="content">
  25. <p>Any content vertically centered.</p>
  26. </div>
  27. </div>
  28. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.