如何将按钮夹在两个div之间

Question

我在视口上有2个Div，每个高度为50vh，因此整个视口都被填满了。

我能够通过将按钮包含在上部div之下来完成中间的按钮，然后将按钮的margin-top设置为负值，这样它就会降低。

但是，当内容较长以允许滚动时，我需要使用最小高度：50vh（而不是高度：50vh）。由于最小高度，上部div最终变得更高，以包括整个按钮。

我该怎么做？我尝试在上部和下部div之间制作div（而不是在上部div之间），但我似乎无法使其工作。我在下面列出了我想要完成的图片。实现这一目标的理想方法是什么？

Answer 1

瞧！

两个<div>之间的按钮获得以下样式：

display: block;
position: absolute;
left: 50%;
transform: translateY(-50%) translateX(-50%);

• display: block允许设置宽度和高度。
• position: absolute将其置于所有其他元素之外。
• left: 50%在整个页面（右侧）发送50％的内容。
• transform: translateY(-50%) translateX(-50%)将其向上翻译其宽度的50％（因为否则，其顶部将与第二个<div>的顶部对齐），并将其翻译为左边宽度的50％。

段：

html,
body {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  outline: 0;
  margin: 0;
  padding: 0;
}
.top {
  min-height: 50vh;
  color: #00bfa5;
  padding: .1em 1em;
}
.main-btn {
  background-color: #ffc400;
  border: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  font-weight: bold;
  font-size: 2em;
  color: white;
  left: 50%;
  border-radius: 50%;
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: background-color 0.1s ease-out;
}
.main-btn:hover {
  background-color: #ffcc11;
}
.bottom {
  min-height: 50vh;
  background-color: #00bfa5;
  color: white;
  font-size: .8em;
  padding: 2em;
}
input {
  width: 2em;
  height: 2em;
}

<div class="top">
  DID YOU EXERCISE FOR 30 MINUTES PER DAY OVER THE LAST 3 DAYS?
</div>
<button class="main-btn">&gt;</button>
<div class="bottom">
  <div>
    <input type="radio" name="e" id="yes" />
    <label for="yes">I did.</label>
  </div>
  <div>
    <input type="radio" name="e" id="mostly" />
    <label for="mostly">I mostly did.</label>
  </div>
  <div>
    <input type="radio" name="e" id="no" />
    <label for="no">Not this time.</label>
  </div>
</div>

Answer 2

让它绝对定位并居中，同时保持元素在另外两个之间。外部div的高度不重要，它将永远存在。

或者你可以把它变成一个外面的孩子，让外面的一个相对定位，按钮绝对定位并水平居中top或bottom（取决于你的外部div）选择作为父级）设置为按钮的负半高。

＆＃13;

＆＃13;

div {height: 50px; width: 200px;}
#b {background: #efe; position: relative}
#g {background: green}
button {position: absolute; height: 40px; width: 40px; background: orange; border-radius: 40px; margin: auto; left: 0;right: 0;bottom: -20px}

＆＃13;

<div id="b"><button></button></div>
<div id="g"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下是将btn设置为position:relative;并设置top和left位置的简单示例。

<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="mybtn">BTN</div>

#mybtn {
  position:relative;
  top: -125px;
  left: 50px;
}

Here is a demo，你可以在css的末尾设置第一个div的高度，按钮仍然会保持原样。