Vertically centered content

Public

If you want to center content vertically in DOM element, use/adapt this example code:

Get raw version
css
  1. .box {
  2. min-height: 8em;
  3. display: table-cell;
  4. vertical-align: middle;
  5. }

Comments

picturina's picture

  1. #parent {position: relative;}
  2.  
  3. #child {
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. height: 30%;
  8. width: 50%;
  9. margin: -15% 0 0 -25%;
  10. }

OR

  1. #parent {
  2. padding: 5% 0;
  3. }
  4. #child {
  5. padding: 10% 0;
  6. }

courtesy of Steven Bradley