How to vertically align animated text in div?

December 15, 2021

My goal is to be able to vertically align animated text in a div element. I have tried looking for an answer on here, but can’t seem to find any. Specifically, I’ve tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.

let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0

function anims() {
  let elem = document.getElementById(elemIds[currentAnimId])
  let bgimg = document.getElementById('backgroundImg')
  currentAnimId += 1
  bgimg.style.animation="bgblur 5s";
  elem.style.display = 'block'
  elem.style.animation="textAnim 5s";
  window.setTimeout(() => {
    bgimg.style.animation="none";
    elem.style.display = 'none'
    elem.style.animation="none";
    elem.style.webkitAnimation = 'none';
    window.setTimeout(function() {
      elem.style.webkitAnimation = '';
      if (currentAnimId < elemIds.length) {
        anims(currentAnimId)
      } else {
        console.log("You have reached the end of the text cycle.")
      }
    }, 1000);
  }, 5000)
}

anims(currentAnimId)

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Trebuchet MS', sans-serif;
}

#backgroundImg:empty {
  display: block;
  position: relative;
}

h1 {
  position: absolute;
  vertical-align: middle;
}

#backgroundImg {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
  /* animation: blurry 5s; */
  -webkit-filter: blur(0px);
  background-repeat: no-repeat;
  background-size: 100% auto;
  top: 0;
  left: 0;
}

#backgroundImg, #textDiv {
  width: 100%;
  height: 100%;
  position: absolute;
}

#textDiv {
  left: 100px;
  height: 80%;
  width: 80%;
  color: transparent;
  -webkit-text-stroke: 1px white;
  text-shadow: 10px 10px 20px black;
  z-index: 10;
  vertical-align: middle;
  text-align: left;
}

#a, #b, #c, #d, #e {
  font-size: 800%;
  display: none;
}

@keyframes bgblur {
  0% {
    -webkit-filter: blur(0px);
  }
  25% {
    -webkit-filter: blur(5px);
  }
  75%

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="backgroundImg">
    </div>
    <div id="textDiv">
      <h1 id="a">a</h1>
      <h1 id="b">b</h1>
      <h1 id="c">c</h1>
      <h1 id="d">d</h1>
      <h1 id="e">e</h1>
    </div>
    <script src="script.js"></script>
  </body>
</html>

If anyone could help that would be great!

PS: I just want it vertically centered, not horizontally.
Thanks!

>Solution :

Add display: flex; align-items: center; to your textDiv. Your textDiv height is 80%, you should make it 100% if you want to center vertically on all screen

let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0

function anims() {
  let elem = document.getElementById(elemIds[currentAnimId])
  let bgimg = document.getElementById('backgroundImg')
  currentAnimId += 1
  bgimg.style.animation="bgblur 5s";
  elem.style.display = 'block'
  elem.style.animation="textAnim 5s";
  window.setTimeout(() => {
    bgimg.style.animation="none";
    elem.style.display = 'none'
    elem.style.animation="none";
    elem.style.webkitAnimation = 'none';
    window.setTimeout(function() {
      elem.style.webkitAnimation = '';
      if (currentAnimId < elemIds.length) {
        anims(currentAnimId)
      } else {
        console.log("You have reached the end of the text cycle.")
      }
    }, 1000);
  }, 5000)
}

anims(currentAnimId)

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Trebuchet MS', sans-serif;
}

#backgroundImg:empty {
  display: block;
  position: relative;
}

h1 {
  position: absolute;
  vertical-align: middle;
}

#backgroundImg {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
  /* animation: blurry 5s; */
  -webkit-filter: blur(0px);
  background-repeat: no-repeat;
  background-size: 100% auto;
  top: 0;
  left: 0;
}

#backgroundImg, #textDiv {
  width: 100%;
  height: 100%;
  position: absolute;
}

#textDiv {
  left: 100px;
  height: 80%;
  width: 80%;
  color: transparent;
  -webkit-text-stroke: 1px white;
  text-shadow: 10px 10px 20px black;
  z-index: 10;
  display: flex;
  align-items: center;
  text-align: left;
}

#a, #b, #c, #d, #e {
  font-size: 800%;
  display: none;
}

@keyframes bgblur {
  0% {
    -webkit-filter: blur(0px);
  }
  25% {
    -webkit-filter: blur(5px);
  }
  75%

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="backgroundImg">
    </div>
    <div id="textDiv">
      <h1 id="a">a</h1>
      <h1 id="b">b</h1>
      <h1 id="c">c</h1>
      <h1 id="d">d</h1>
      <h1 id="e">e</h1>
    </div>
    <script src="script.js"></script>
  </body>
</html>