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

Try making footer a flex and then center its content `.footer {display:flex ; align-items:center; }` — ShivCK, Feb 26 '22 at 16:19

score 2 · Answer 1 · answered Feb 26 '22 at 17:29

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

Cutey from Cute Code · Answer 2 · 2022-02-26T17:31:49.880

1

This should work for you....

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

edited Feb 26 '22 at 17:31

answered Feb 26 '22 at 16:13

Cutey from Cute Code

1,065
3
13

Thanky you. This moves the text directly to the left. – patricklemmer Feb 26 '22 at 16:25
Sorry, add `left: 50%;` – Cutey from Cute Code Feb 26 '22 at 17:31
Thanks for replying again. left: 43% centered it. – patricklemmer Feb 26 '22 at 17:52
All good @meerkatstudio. Glad you got it solved. – Cutey from Cute Code Feb 26 '22 at 19:36

score 1 · Accepted Answer · answered Feb 26 '22 at 16:14

1

.footer {
line-height:8vh;

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

answered Feb 26 '22 at 16:14

blackshopman

26
1

score 1 · Answer 4 · answered Feb 26 '22 at 16:34

1

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;
}

answered Feb 26 '22 at 16:34

Oybek Odilov

185
9

Vertically align text inside fixed div

4 Answers4