Horizontally centering text in CSS animations

Question

The CSS seems to be horizontally centering the text by the first letter. I'd like to make it be perfectly centered on the page, without breaking the animation. I added a gradient to show the exact horizontal center of the page.

.wrapper {
  height: 100vh;
  background: linear-gradient(to right, #1e5799 0%,#ffffff 50%,#7db9e8 100%);
}

.container {
  text-align: center;
}

.vcenter {
  position: relative;
  top: calc(50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.container h2 {
  background: red;
  display: inline-block;
  position: absolute;
  opacity: 0;
  overflow: visible;
  -webkit-animation: rotateWord 12s linear infinite 0s;
  -ms-animation: rotateWord 12s linear infinite 0s;
  animation: rotateWord 12s linear infinite 0s;
  margin: 0;
}

.container h2:nth-child(2) {
  -webkit-animation: rotateWord 12s linear infinite 3s;
  -ms-animation: rotateWord 12s linear infinite 3s;
  animation: rotateWord 12s linear infinite 3s;
}

.container h2:nth-child(3) {
  -webkit-animation: rotateWord 12s linear infinite 6s;
  -ms-animation: rotateWord 12s linear infinite 6s;
  animation: rotateWord 12s linear infinite 6s;
}

.container h2:nth-child(4) {
  -webkit-animation: rotateWord 12s linear infinite 9s;
  -ms-animation: rotateWord 12s linear infinite 9s;
  animation: rotateWord 12s linear infinite 9s;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<div class="wrapper">
  <div class="container vcenter">
    <h2>HEY THERE THIS IS TEXT</h2>
    <h2>DIFFERENT TEXT</h2>
    <h2>THIS IS TEXT</h2>
    <h2>DIFFERENT LENGTHS OF TEXT</h2>
  </div>
</div>

possible duplicate: http://stackoverflow.com/q/36817249/3597276 — Michael Benjamin, Jan 13 '17 at 22:35
If possible, you could remove the `display:inline-block` from `h2` tags and add `width:100%` and `margin:auto`. If the red background is required to be just around the text and not a full band, add a text container inside the `h2` tags and apply the color there. — Reed Raymond, Jan 13 '17 at 22:45

Stickers · Accepted Answer · 2017-01-14T00:22:51.697

Make sure to set the correct transform values in the @keyframes, also the middle div container can be removed to make it easier.

jsFiddle

body {
  margin: 0;
}

.container {
  height: 100vh;
  text-align: center;
  background: linear-gradient(to right, #1e5799 0%, #ffffff 50%, #7db9e8 100%);
}

.container h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  margin: 0;
}

.container h2:nth-child(1) {
  animation: rotateWord 12s linear infinite 0s;
}

.container h2:nth-child(2) {
  animation: rotateWord 12s linear infinite 3s;
}

.container h2:nth-child(3) {
  animation: rotateWord 12s linear infinite 6s;
}

.container h2:nth-child(4) {
  animation: rotateWord 12s linear infinite 9s;
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
  5% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
  17% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
  20% {
    opacity: 0;
    transform: translate(-50%, 30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<div class="container">
  <h2>HEY THERE THIS IS TEXT</h2>
  <h2>DIFFERENT TEXT</h2>
  <h2>THIS IS TEXT</h2>
  <h2>DIFFERENT LENGTHS OF TEXT</h2>
</div>

Thank you! Why do I have to set the translate on the animations as well, why doesn't it center if I just set h2 to "transform: translate(-50%, 0px)"? — Tronald, Jan 14 '17 at 04:16
@Tronald Because any rules set in the keyframes overrides the former ones. see this css tricks [article](https://css-tricks.com/centering-percentage-widthheight-elements/) for how the centering works. — Stickers, Jan 14 '17 at 13:47

Horizontally centering text in CSS animations

1 Answers1