在页面中间粘贴div

Question

滚动时如何让div保持在页面中间？

到目前为止我有这样的事情：https://jsfiddle.net/7wqk9fp0/2/

#D1{
    width: 500px;
    position: fixed;
    margin: auto;
    top: 50%; 
    left: 0;
    background-color: red;
    bottom: 0;
    right: 0;

}

问题是如果div的内容大于容器的高度，它将在页面上不可见。另外，如何使高度与内容大小相匹配？

Answer 1

您可以使用帮助程序容器

来实现此目的

HTML

<div id="helper-container">
   <div id="centered-element">
      <div class="content">
          The content goes here...
      </div>
   </div>
</div>

CSS

#helper-container {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

#centered-element {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#centered-element .content {
    display: inline-block;
    width: 300px;
    max-height: 400px;
    background: gray;
    overflow-y: scroll;
}

JSFiddle：http://jsfiddle.net/LeoAref/sjn3deLw/

Answer 2

试试这个：https://jsfiddle.net/7wqk9fp0/5/

我使用现代的flex属性。

iOS尚不支持，因此为了更好的兼容性，您可以将#overlay扩展为：

#overlay {
    /* iOS */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;

    position: fixed;
    align-items: center;
    justify-content: center;
    display: flex;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Answer 3

我使用了一个涉及容器中的内联块元素的小技巧。

它基本上是一个容器，跨越100%页面height，其中:before伪造元素的高度为100%，vertical-align: middle和display: inline-block作为基本属性。

设置psuedo元素之后，您只需创建想要水平或垂直居中的子项。

这些孩子至少需要display: inline-block和vertical-align: middle，他们的定位必须不会破坏课程的流动;）

这是一个非常简洁的解决方案，可以归结为与@leoAref相同的解决方案，除非这种技术不使用表格，并且由于psuedo元素，嵌套级别减少了1。

Fiddle here

此技术的缺点是包含元素的高度必须等于页面高度的100％，否则:before元素的高度不会超过100%，效果不会超过工作。将属性设置为min-height或max-height并不具体，并且不会为孩子工作。

这意味着容器的每个父级都需要定义height 100%才能生效。

<强> HTML

<div class="container">
    <div class="centered">
        <p>This is my content</p>
        <p>This is more content</p>
    </div>
    <div class="centered">
        <p>This is my content</p>    
        <p>This is more content</p>
        <p>This is my content</p>
        <p>This is more content</p>
        <p>This is even more content</p>
    </div>
</div>

<强> CSS

html, body {
    height: 100%;
    margin: 0;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}

.container:before {
    position: relative;
    height: 100%;
    vertical-align: middle;
    width: 0;
    display: inline-block;
    font-size: 0;
    content: " ";
}

.centered {
    box-sizing: border-box; /*not required*/
    min-width: 40%;
    min-height: 30px;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
    background: #ccc;
}

Answer 4

这可能不是OP想要的，但是当您搜索“中间的Sicky div”时，该问题首先出现在Google中，因此有人可能会觉得有用。

我想在另一个div的中间设置一个“粘性” div，这样当用户滚动页面时它仍然可见。典型的用例是显示加载动画，该动画表明页面的某些部分正在获取数据。例如，您可能有很长的项目列表，用户单击按钮可获得更多数据，并且希望在列表可见时在此列表上始终显示粘性加载程序。

您可以简单地将top属性设置为50%，它应该将元素粘贴在最近的滚动容器的中间（通常只是浏览器窗口）。

position: sticky;
top: 50%;

如果您知道元素的大小，也可以使用calc将元素精确居中。

  position: sticky;
  width: 60px;
  height: 60px;
  border: solid black;
  top: calc(50% - 30px);

以下是一些示例：

document
  .getElementById("showLoaderOverlay")
  .addEventListener("click", function() {
    document
      .getElementsByClassName("second-example__div1-inside-overlay")[0]
      .classList.remove("hidden");
  });


document
  .getElementById("hideLoaderOverlay")
  .addEventListener("click", function() {
    document
      .getElementsByClassName("second-example__div1-inside-overlay")[0]
      .classList.add("hidden");
  });

.div1 {
  width: 200px;
  height: 500px;
  background-color: yellow;
}

.div2 {
  width: 200px;
  height: 800px;
  background-color: orange;
}

.div2inside {
  background-color: red;
  position: sticky;
  top: 50%;
}

.div3 {
  width: 200px;
  height: 1000px;
  background-color: pink;
}

.second-example__div1 {
  position: relative;
  z-index: 0;
}

.second-example__div1 {
  background-color: rebeccapurple;
  width: 500px;
}

.second-example__div1-inside-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
}

.second-example__div1-inside-loader {
  position: sticky;
  width: 100px;
  height: 100px;
  border: solid black;
  top: calc(50% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none;
}

<html>
<div class="div1">div1</div>
<div class="div2">
  div2
  <div class="div2inside">
    inside div 2
    <br> sticky in the middle of page
  </div>
</div>
<div class="div3">div3</div>
<h2>Other example</h2>
<button id="showLoaderOverlay">Click me and scroll</button>
<div class="second-example__div1">
  <div class="second-example__div1-inside-overlay hidden">
    <div class="second-example__div1-inside-loader">
      loading...
    </div>
  </div>
  <ul>
    <li> very</li>
    <li> big</li>
    <li> list</li>
    <li> of</li>
    <li> some</li>
    <li> items</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, quod.</li>
    <li>Unde sed similique in laudantium doloribus obcaecati maxime debitis maiores?</li>
    <li>Nisi architecto laborum ab et ducimus non nemo tempore minima.</li>
    <li>Provident doloremque recusandae consectetur excepturi minus magnam corporis nemo dolorem!</li>
    <li>Suscipit facilis aliquam dignissimos vel nesciunt vitae, temporibus recusandae ipsam!</li>
    <li>Iste corporis ipsam in iure fuga beatae rerum expedita explicabo.</li>
    <li>Pariatur tenetur ducimus maiores, excepturi est cumque accusantium vel quia!</li>
    <li>Alias dolorem illum quisquam nihil quaerat quasi exercitationem, tenetur repudiandae!</li>
    <li>Nemo omnis enim officia incidunt consequuntur. Nesciunt illo fuga quidem?</li>
    <li>Sint fuga voluptates impedit omnis eius iusto, est assumenda at.</li>
    <li>Maiores explicabo velit facere repellat quae eveniet commodi similique aliquid!</li>
    <li>Provident saepe nostrum sit accusantium aspernatur eaque labore, asperiores ab!</li>
    <li>Veniam, quo similique accusantium cumque quasi sed officia minus ratione?</li>
    <li>Cupiditate ratione tempore magni quisquam a dolore eius aliquam itaque!</li>
    <li>Quam tenetur, nisi repellendus a harum sed molestias eius mollitia?</li>
    <li>Accusamus ipsum porro nobis natus quod delectus blanditiis cumque totam?</li>
    <li>Deleniti quia commodi porro reprehenderit voluptates cumque. Amet, minus modi.</li>
    <li>Facere beatae totam ut eaque aliquid laborum, tempora quo natus?</li>
    <li>Cumque architecto rem illo non itaque dolorum dolorem sint magnam?</li>
    <li>Necessitatibus dicta beatae ducimus ex dolores odio molestiae porro laboriosam.</li>
    <li>Alias illum iusto praesentium vitae recusandae quo, magnam error cum.</li>
    <li>Facilis, aliquam maiores soluta asperiores maxime aperiam distinctio alias assumenda?</li>
    <li>Fugit autem, corporis quasi cum cumque eos sequi molestiae quibusdam.</li>
    <li>Quisquam eveniet reiciendis cumque odio deleniti iusto nihil ratione soluta.</li>
    <li>Dignissimos recusandae quasi ipsa? Sint tempora ea delectus ullam suscipit.</li>
    <li>Repudiandae dignissimos similique quos, quaerat necessitatibus minus magnam quo commodi?</li>
    <li>Molestiae rem nemo itaque obcaecati eveniet cupiditate fugit consequuntur quibusdam.</li>
    <li>Aperiam iusto, labore asperiores dolores perferendis fugiat veritatis corrupti quis!</li>
    <li>Maiores numquam doloribus animi veritatis molestias nam voluptates fugiat voluptatibus.</li>
    <li>Fuga culpa minus nulla ex totam maxime voluptatem, perferendis labore.</li>
    <li>Dolore omnis in ipsa laboriosam dicta obcaecati fugit unde. Necessitatibus.</li>
    <li>Soluta voluptatem voluptas ullam cum ipsum repudiandae cupiditate debitis aliquam?</li>
    <li>Tempora molestias vitae adipisci id, nam voluptatibus neque perspiciatis repudiandae!</li>
    <li>Quasi iste dolorum expedita eos eaque soluta dicta ipsam quidem!</li>
    <li>Repudiandae delectus minus quas odit est nisi iusto quo atque?</li>
    <li>Voluptatibus eius expedita asperiores suscipit a rerum quis odio culpa.</li>
    <li>Consectetur dolores doloribus, tempora dolorem nemo voluptatibus! Amet, expedita nulla.</li>
    <li>Rem non aperiam porro eveniet, ex saepe voluptate molestiae. Ea!</li>
    <li>Impedit, veniam quasi beatae quaerat cupiditate hic soluta. Odio, nam!</li>
    <li>Ut non obcaecati voluptate rerum culpa aperiam! Obcaecati, voluptatibus accusamus.</li>
  </ul>

</div>
<button id="hideLoaderOverlay">Hide loader</button>
<div class="div3">div3</div>
<html>