Javascript 将div垂直居中于两个元素之间

所以我有两个元素，在我的例子中是一个图像和一个按钮。我在页面顶部有图像，底部有按钮。我想要一个div（或其他元素）来显示文本，但我需要它在两个元素之间居中

<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>

帮助
你好

---

我正在使用HTML和Javascript。

查看flexbox中的现代布局：

---

您可以使用flexbox，正如其他答案中所建议的那样。不过，有时候，在你第一次尝试时，这可能很难争论。尽管强烈建议将flexbox添加到工具带中

要解决这个问题，也许更简单一些： 1.）可以设置父div的高度（任意设置），然后在要居中的元素上设置边距顶部。您可以调整它，直到它位于正确的位置。 或

---

2.）或者：您也可以设置位置：相对；顶部：100px（或将其设置在中间的任何内容。设置位置规则将允许您设置顶部、左侧、右侧或底部。如果不设置位置规则，则无法使用这些规则。

创建一个

来保存文本，然后使用CSS对其进行操作。

Flexbox提供了最佳且简短的解决方案从传统的解决方案开始。 你可以在这里找到小提琴

你的Html

    <div class="container">
        <div class="image">
          <img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
        </div>
        <div class="text">
          Help
        </div>
        <div class="btn">
          <button>
            My Button
          </button>
        </div>
   </div>

帮助我将css元素垂直居中。可能重复

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.text{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center
}