如何让一个高度会变化的内容区域在用户屏幕上垂直居中,直到它到达页面顶部只剩下 100像素
的空白处?
以下是一个示意图:
我不确定解决此问题的方法是否仅使用CSS或JavaScript,因此欢迎所有建议。
如何让一个高度会变化的内容区域在用户屏幕上垂直居中,直到它到达页面顶部只剩下 100像素
的空白处?
以下是一个示意图:
我不确定解决此问题的方法是否仅使用CSS或JavaScript,因此欢迎所有建议。
我的解决方案考虑到您希望整个页面都居中,而不仅仅是“下面的空间”。我使用负边距来实现这一点。
在这里查看实际工作示例:
HTML:
<div id="container">
<div id="table">
<div id="cell">
<div id="content">Some content</div>
</div>
</div>
</div>
CSS:
#container {
width: 100%;
height: 100%;
padding: 100px 0;
margin-top: -100px;
}
#table {
display: table;
width: 100%;
height: 100%;
margin-top: 100px;
}
#cell {
display: table-cell;
vertical-align: middle;
}
#content {
background-color: lightblue;
width: 50%;
margin: 0 auto;
}
测试结果:
更新:
我使用了box-sizing: border-box;
,但是Firefox需要额外的-moz-box-sizing: border-box;
。现在它也可以在Firefox中正常工作了。
纯CSS,不使用表格
另一种方法是使用CSS Grids。 align-items
属性使您可以轻松垂直对齐网格内容,并在内容超出单元格时回退到正常对齐。
一个示例:
function removeParagraph() {
const p = document.querySelector('p')
if (p)
p.parentNode.removeChild(p)
}
function addParagraph () {
const p = document.createElement('p')
p.textContent = 'Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.'
document.querySelector('#content').appendChild(p)
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
height: 100%;
display: grid;
grid-template-rows: 50px 1fr;
align-items: center;
}
#space {
height: 50px;
width: 100%;
border-bottom: 2px dashed red;
color: red;
text-align: center;
line-height: 50px;
}
#content {
width: 80%;
background-color: lightblue;
margin: 0 auto;
}
p {
padding: 10px;
margin: 0;
}
<section id="wrapper">
<div id="space">
<button onclick="removeParagraph()">remove paragraph</button>
<button onclick="addParagraph()">add paragraph</button>
</div>
<div id="content">
<p>Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.
</p>
</div>
</section>
这个内容基于ToniTornado的回答,但需要更少的包装。
HTML
<div id="container">
<div id="content">Some content</div>
</div>
CSS(垂直定位的最低要求)
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
padding-top: 100px;
margin-top: -100px;
}
#container {
display: table-cell;
vertical-align: middle;
padding-top: 100px;
}
如上述代码所示,上述 CSS 使 #content
在屏幕空间上居中。如果您希望在顶部区域下方的空间上居中,则通过删除负上边距来调整 body
,并通过删除其顶部填充来调整 #container
,像这个代码一样:
body {
display: table;
padding-top: 100px;
}
#container {
display: table-cell;
vertical-align: middle;
}
虽然这需要一个额外的.wrapper
,但使用display: table;
和相关属性可以实现此布局:
<div class="container">
<div class="top">some space</div>
<div class="wrapper">
<div class="content">
<div style="height: [any height]">centered content</div>
</div>
</div>
</div>
.container {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 100px;
display: table-row;
}
.wrapper {
/* this will take up remaining height (or stretch to content) */
display: table-row;
}
.content {
/* because this is displayed as a table cell, the vertical align centers
* its content (instead of how it usually works on inline elements) */
display: table-cell;
vertical-align: middle;
}
以上内容将使内容在顶部100像素和底部之间居中,而不是在视口顶部和底部之间(使用CSS的hacky方法是http://jsfiddle.net/gLECE/6/,但ToniTornado的答案是一个可靠的解决方法)。
@TCHdvlp的尝试接近了解决方案,但缺少一些必要的部分(缺少顶部空间,实际上并没有完全居中)。
TCHdvlp脚本的工作版本已编辑:
var height = $(document.body).height();
$(".dca").each(function(){
if(($(this).height()+100) < height){
$(this).css({top: '50%', marginTop: - $(this).height() / 2 });
}
});
注意:您可能不仅想在页面加载时执行此操作,还要在窗口调整大小时执行。<table>
被认为是不适合用于布局的,但没有理由避免使用 display: table;
。即使IE8也支持 :) - xec<div id="container">
<div id="topbar">You can't touch me</div>
<div id="content">Aliquam erat volutpat...</div>
</div>
CSS
div#topbar {
border: 2px dashed red;
height: 50px;
text-align: center;
}
div#content {
background: #90c0ff;
width: 260px;
margin: 0px auto;
position: relative;
}
JavaScript
var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) {
topMargin = 0;
}
content.style.top = topMargin + 'px';
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.space {
min-height: 100px;
background-color: rgba(0, 0, 0, 0.158);
}
.content-container {
height: 100%;
display: flex;
}
.content {
margin: auto;
background-color: cyan;
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<div class="space"></div>
<div class="content-container">
<div class="content">
<p>CONTENT</p>
</div>
</div>
<div class="space"></div>
</body>
</html>
有趣的问题!我没有看到任何可以实现这一点的CSS属性。但是,也许它存在。您可以尝试使用CSS和JavaScript。使用CSS position:relative
和JS设置顶部。当DCA.height()+100 <= container.height时,将DCA顶部设置为(container.height - DCA.height)。否则,顶部为0,因此DCA将附加到容器的top
,假设容器从“内容不能超过此高度”行开始。让我在jsfiddle中尝试并编辑我的帖子。
在这里:
#container
是否也必须随之波动呢?或者您建议检测用户的屏幕高度并将其设置为#container
的高度? - Adam McArthurDCAHeight+100 < 500
这样计算,而是获取了 container.height
。容器的大小可能会有所变化,但结果将是好的。 - TCHdvlp没有使用JS是可能的,但这肯定很难,而且您可能需要使用大量的CSS代码,这与旧版(<9)IE版本不兼容。
概念如下:
如果您想,我可以在jsfiddle上为您做到这一点。
请确保您已启用HTML5声明,方法是使用<!DOCTYPE html>
。
然后,使用<center style="width:100%;"></center>
标签来使您的元素居中。
上述标签内的任何元素都将居中且具有响应性。
position:relative
和JS设置top
。当DCA.height()+100 <= container.height时,在(container.height - DCA.height)处设置DCA的top
。否则,top
为0,因此DCA将附加到容器的顶部,假设容器从“内容不能超过此高度”行开始。让我在jsfiddle中尝试并编辑我的帖子。 - TCHdvlpmax-height
,但是没有成功! - Adam McArthur