vertically centring with absolute – no height

Trying to vertically center a div position: absolute; inside its parent position: relative.

the css I am using

#parent {
    position: relative
}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 30%;
}

The problem is that I have to set the height to 30% to get it to center properly. However, when the content (mostly text) condenses on smaller screens it goes on multiple lines and the 30% height screws up.


Source: jquery

Leave a Reply