Home>

. lesson-icon {
  position: relative;
  height: 200px;
}
.img-under {
  position: absolute;
  top: 100px;
}
<div>
 <img src = "..." alt = "" />
 <p>HTML&CSS</p>
...

As the picture shows,

for parent element lesson-icon The height of child element img-under is not specified in the center.

In the verification result, there is no deviation of the element position due to margin and padding of other elements.

Professor please.

  • Answer # 1

      

    There is no shift in element position due to margin and padding of other elements.

    Looks like the child element margin works?

    margin: 0;
    Huh? Is n’t it centered vertically?
    Then, if you settop, which is half the height of the parent element, you are supposed to place the element below the middle

    Please do this

    Seven ways to center elements from top/bottom or left/right with CSS

    Nine ways of centering with CSS (centering vertically and horizontally)

  • Answer # 2

    You settopto100px.
    The top is at the position of100px.
    The parent element is200pxhigh.
    So what is the height of thepelement?
    Isn't it at least0?

    Are you sure?