Question

所以我有两个元素，在我的例子中是一个图像和一个按钮。我的图像位于页面顶部，按钮位于底部。我想要一个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>

JSFIDDLE

我正在使用HTML和Javascript。

Answer 1

了解flexbox的现代布局： a guide to flexbox

Answer 2

您可以使用flexbox，如其他答案所示。但是，在您第一次开始时，这有时很难纠缠。虽然强烈建议在工具带上添加flexbox。

要更简单地解决这个问题： 1.）您可以设置父div的高度（根据需要设置），然后在要使其居中的元素上设置margin-top。你可以调整它直到它正确。要么... 2.）或者：您也可以设置位置：relative;和顶部：100px（或任何设置到中间。设置位置规则将允许您设置顶部，左，右或底部。没有设置位置规则，你不能使用这些规则。

Answer 3

创建一个<div></div>来保存您想要放入其中的文本，然后使用CSS操作它。

Answer 4

Flexbox提供传统解决方案的最佳和简短解决方案。你可以在这里找到工作小提琴https://jsfiddle.net/rr0e4qh7/14/

你的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
}

垂直居中两个元素之间的div

4 个答案: