滚动时如何让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的内容大于容器的高度,它将在页面上不可见。另外,如何使高度与内容大小相匹配?
答案 0 :(得分:3)
您可以使用帮助程序容器
来实现此目的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;
}
答案 1 :(得分:1)
试试这个: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;
}
答案 2 :(得分:1)
我使用了一个涉及容器中的内联块元素的小技巧。
它基本上是一个容器,跨越100%
页面height
,其中:before
伪造元素的高度为100%
,vertical-align: middle
和display: inline-block
作为基本属性。
设置psuedo元素之后,您只需创建想要水平或垂直居中的子项。
这些孩子至少需要display: inline-block
和vertical-align: middle
,他们的定位必须不会破坏课程的流动;)
这是一个非常简洁的解决方案,可以归结为与@leoAref相同的解决方案,除非这种技术不使用表格,并且由于psuedo元素,嵌套级别减少了1。
此技术的缺点是包含元素的高度必须等于页面高度的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;
}
答案 3 :(得分:0)
这可能不是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>