How to set Vertical Centering With CSS in body page

This method works for block level elements and also works in all browsers. It does require that we set the height of the element we want to center.

In the code below I’m centering the child both vertically and horizontally using this method.

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Leave a Reply

Your email address will not be published.