javascript - 居中文本和切换可见性

Question

我正在尝试使用 html/Javascript 将一些文本居中，然后在等待 3 秒后将其在可见和不可见之间切换。我在用 JS 中包含 setTimeout() 的函数，用于在 3 秒后更改显示属性。然而，尽管我尝试了无数解决方案，但文本既不会出现也不会垂直居中。这是我目前所拥有的:

function myfunction() {
  document.getElementsByClassName("parent-class").style.display = "table";
  document.getElementById("h3").style.display = "table-cell";
  setTimeout(function() {
    document.getElementById("h3").style.display = "none";
  }, 3000);
};
myfunction();

.parent-class {
  width: 100%;
  height: 100%;
  text-align: center;
}

.parent-class>h3 {
  vertical-align: middle;
}

<div class="parent-class" style="display:none">
  <h3>+</h3>
</div>

如果我没有为父类设置属性“display:none”，文本(十字)会错误地出现在我程序的第一页上。不知道从这里去哪里，因为感觉我已经尝试了许多显示类型和元素配置。请帮忙!

Answer 1

document.getElementsByClassName("parent-class") 返回元素数组 (getElements)。 document.getElementById("h3") 将不返回任何内容，因为没有 ID h3。

要使文本居中，您是否考虑过 flexboxes？

检查这个 fiddle :https://jsfiddle.net/fokq0btv/

此外，请考虑使用 document.querySelector 而不是旧的 document.getElementBy...