HTML: Making a link lead to the anchor centered in the middle of the page

Question

I found a solution Anchor Links With A Fixed Header posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.

<span class="anchor" id="section1"></span>
<div class="section"></div>

then put the following css code

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

Thanks, Phillip!