How to center div vertically inside of absolutely positioned parent div

by

First of all note that vertical-align is only applicable to table cells and inline-level elements.

There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I’ll show you two methods from my favorites:

1. Using transform and top

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

The key point is that a percentage value on top is relative to the height of the containing block; While a percentage value on transforms is relative to the size of the box itself (the bounding box).

If you experience font rendering issues (blurry font), the fix is to add perspective(1px) to the transform declaration so it becomes:

transform: perspective(1px) translateY(-50%);

It’s worth noting that CSS transform is supported in IE9+.

2. Using inline-block (pseudo-)elements

In this method, we have two sibling inline-block elements which are aligned vertically at the middle by vertical-align: middle declaration.

One of them has a height of 100% of its parent and the other is our desired element whose we wanted to align it at the middle.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Finally, we should use one of the available methods to remove the gap between inline-level elements.

More Related Contents:

  1. How do I vertically center text with CSS? [duplicate]
  2. Vertically align text next to an image?
  3. How can I vertically align elements in a div?
  4. How do I vertically align text in a div?
  5. Best way to center a on a page vertically and horizontally? [duplicate]
  6. How to align content of a div to the bottom
  7. Vertically align an image inside a div with responsive height
  8. Why does this inline-block element have content that is not vertically aligned
  9. CSS vertical alignment of inline/inline-block elements
  10. How to vertically center a container in Bootstrap?
  11. Vertical Text Direction
  12. How can I vertically center a div element for all browsers using CSS?
  13. How to set the margin or padding as percentage of height of parent container?
  14. Add centered text to the middle of a horizontal rule [duplicate]
  15. Position: absolute and parent height?
  16. Vertical align not working on inline-block
  17. How to vertically align into the center of the content of a div with defined width/height?
  18. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
  19. How does the vertical-align property work?
  20. CSS: Vertically align div when no fixed size of the div is known
  21. Why doesn’t vertical-align work properly when using float in CSS?
  22. Pin a flex item to the bottom of the container
  23. Html/Css Triangle with pseudo elements
  24. Unskewing the ends of an assortment multiple skewed images
  25. How to align two elements on the same line without changing HTML
  26. Scroll to a specific Element Using html
  27. Remove border from buttons
  28. How can I show dots (“…”) in a span with hidden overflow?
  29. CSS Selector “(A or B) and C”?
  30. How to change one element while hovering over another with CSS

Leave a Comment