'Vertically align text inside fixed div [duplicate]

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

htmlcsscentering


Solution 1:[1]

Codes written in the .footer p is appropriate for centering of an element:

.footer {
  background-color: seagreen;
  height: 100vh;
  position: relative;
}

.footer p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="footer">
  <p>Website made in 2022. Copyright Test Site</p>
</div>

See here: https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform

Solution 2:[2]

Hi! Add these CSS properties to your parent element and everything in your element will be centered:

.footer {
  /* Your code... */

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Solution 3:[3]

This should work for you....

.footer p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arman Ebrahimi
Solution 2 Oybek Odilov
Solution 3

Related Questions