Question

Here is a jsFiddle I set up.

The parent and child element’s height will be uncertain(means it will change after) and the child element’s position must be absolute.

How can I offset the child element vertically by five pixels from the center of the parent?

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent{
    position:relative;
    margin: 10% auto;
    background:lightgray;
    height:50px;/*parent's height will change after*/
    width:200px;
}
.parent .child{
    position:absolute; /* needs to be absolutely position */
    top:0;
    bottom:0;
    margin:auto;
    width:100%;
    height:20px;/*child's height will change after*/
    background:darkgray;
}

Answer 1

offset 5px where??

Like this —-> Updated Fiddle

or

Like this —-> Updated Fiddle