Vertically align text inside fixed div

Question

I am trying to align a single line text within my footer. The footer div is fixed and 100% width. I did go through quite a few questions, but none seemed to help me with my specific settings. The most promising answer so far was using transform and translate but I could only get it 75% centered. Here´s the code:

  <footer>
    
    <div class="footer">
      <p>Website made in 2022. Copyright Test Site</p>
    </div>
    
  </footer>

.footer {
  background-color: var(--primary-color);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8vh;
  border: 1px solid blue;
}

.footer p {
  font-family: 'Staatliches', cursive;
  color: var(--text-color);
  text-align: center;
}

What´s the best way to center this text, considering the fact that I might have to add some social icons at a later stage, which then should be also centered underneath the text.

TIA

Answer 1

.footer {
line-height:8vh;

} Try setting line-height equal to the height of the box to centre the text vertically