如何在 div 中垂直对齐动画文本？

Question

我的目标是能够在 div 元素中垂直对齐动画文本。我试过在这里寻找答案，但似乎找不到任何答案。具体来说，我尝试了 display:table-cell、vertical-align:middle 和 line-height:__，但它们都给出了相同的结果。

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>

如果有人能提供帮助那就太好了！

PS: 我只是想让它垂直居中，而不是水平居中。谢谢！

Answer 1

将 display: flex; align-items: center; 添加到您的 textDiv。你的textDiv身高是80%，如果你想在所有屏幕上垂直居中，你应该100%

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>

如何在 div 中垂直对齐动画文本？

How to vertically align animated text in div?

html

vertical-alignment