logo标签列表

如何在内容区域垂直居中，直到达到某个高度？

javascriptjqueryhtmlcssresponsive-design
18

如何让一个高度会变化的内容区域在用户屏幕上垂直居中，直到它到达页面顶部只剩下 100像素 的空白处？

以下是一个示意图: 示意图

我不确定解决此问题的方法是否仅使用CSS或JavaScript，因此欢迎所有建议。

有趣的问题！我没有看到任何可以实现这一点的CSS属性。但是，也许它存在。您可以尝试使用CSS和JavaScript。使用CSS position:relative 和JS设置top。当DCA.height()+100 <= container.height时，在(container.height - DCA.height)处设置DCA的top。否则，top为0，因此DCA将附加到容器的顶部，假设容器从“内容不能超过此高度”行开始。让我在jsfiddle中尝试并编辑我的帖子。 - TCHdvlp
有趣，我也会尝试 TCHdvlp。 - Adam McArthur
@4M01 我尝试使用 max-height，但是没有成功！ - Adam McArthur
内容区域的高度增加是由什么引起的？浏览器视口宽度吗？ - Alex Guerrero
嗨，Alex。 "内容区域"（蓝色）div 的高度会随着填充内容而增加，例如字母。 - Adam McArthur
9个回答
8

我的解决方案考虑到您希望整个页面都居中，而不仅仅是“下面的空间”。我使用负边距来实现这一点。

在这里查看实际工作示例：

http://jsfiddle.net/WkQzw/5/

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;
}

测试结果:

  • IE 9 Win7 --> 成功
  • Chrome 30 Mac --> 成功
  • Safari 7 Mac --> 成功
  • Firefox 25 Mac --> 成功

更新:

我使用了box-sizing: border-box;，但是Firefox需要额外的-moz-box-sizing: border-box;。现在它也可以在Firefox中正常工作了。

哦，好激动人心啊。谢谢 Toni，我会试一下的！ - Adam McArthur
很棒的答案，像魔法一样奏效。你的JS Fiddle也做得很好。 - Adam McArthur
谢谢 :) 很高兴能帮到你。 - RobDil
6

纯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>

在上面的例子中，我使用JavaScript允许您添加/删除段落，以便您可以看到增加内容的影响。这仍然是解决问题的纯CSS解决方案。
根据您的受众，对CSS网格的支持非常不错。
这太棒了@shennan。您有什么见解，为什么这在使用flexbox时不起作用？当我使用flex时，内容确实会滚动，但顶部部分被剪裁掉了。 - Derek Nguyen
4

纯CSS，简化HTML

这个内容基于ToniTornado的回答，但需要更少的包装。

查看Fiddle演示

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;
}
1

虽然这需要一个额外的.wrapper，但使用display: table;和相关属性可以实现此布局：

HTML

<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>

css

.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;
}

http://jsfiddle.net/gLECE/3/

更新

以上内容将使内容在顶部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 });
    }
});

http://jsfiddle.net/gLECE/6/

注意：您可能不仅想在页面加载时执行此操作，还要在窗口调整大小时执行。
表格很糟糕，虽然在这种情况下它们可能是不可避免的。 - peterh
3
<table> 被认为是不适合用于布局的，但没有理由避免使用 display: table;。即使IE8也支持 :) - xec
是的，但在<table>（或<div style="display: table">）中使用附加定位会出现错误，即使在最新的浏览器中也是如此。这是因为我总是避免使用表格，而不是因为标准。 - peterh
@MaXX 抱歉，我不太明白你所说的“works the additional positioning buggy”是什么意思？如果你查看了被接受的答案，它非常有效（并且使用了 CSS 表格，就像在我的尝试中一样）。 - xec
抱歉。我查看了您最内层 div 的内容。它不清楚绝对、相对等定位在其中是如何工作的，也没有文档记录，在我的实验中发现存在错误和问题。可能有人能够弄清楚这是如何工作的，但这不会在 w3.org 的文档中找到。 - peterh
1
一种不使用表格而基于JavaScript的解决方案（仅为增加多样性）。
HTML
<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';

http://jsfiddle.net/SD7SA/

谢谢András，我实际上更喜欢这个解决方案，而不是混乱的表格。 - Adam McArthur
0

https://playcode.io/1650918

你可以使用flex来实现这个效果。
使用min-height属性创建间隔，以保持flex容器居中。由于使用了margin:auto，一旦内容太大，flex容器将不会超过顶部的间隔，而min-height将防止该间隔缩小。
这将使内容在屏幕中间居中显示（而不是在顶部间隔下方的区域中间）。一旦内容太大无法适应间隔之间，它将延伸到下方的间隔之外。 

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>

0

有趣的问题！我没有看到任何可以实现这一点的CSS属性。但是，也许它存在。您可以尝试使用CSS和JavaScript。使用CSS position:relative 和JS设置顶部。当DCA.height()+100 <= container.height时，将DCA顶部设置为(container.height - DCA.height)。否则，顶部为0，因此DCA将附加到容器的top，假设容器从“内容不能超过此高度”行开始。让我在jsfiddle中尝试并编辑我的帖子。

在这里：

http://jsfiddle.net/TCHdevlp/gLECE/

嗯，不知道容器的实际高度是否可以实现这一点？内容框内的高度会有所变化，那么#container是否也必须随之波动呢？或者您建议检测用户的屏幕高度并将其设置为#container的高度？ - Adam McArthur
请记住，这是在整个屏幕/窗口中进行的。 - Adam McArthur
在我的例子中，容器是一个 div。我选择它作为容器。你可以选择窗口作为整个容器。正如你在我的例子中看到的，我没有像 DCAHeight+100 < 500 这样计算，而是获取了 container.height。容器的大小可能会有所变化，但结果将是好的。 - TCHdvlp
为什么数字3比数字2更大呢？ - Adam McArthur
0

没有使用JS是可能的，但这肯定很难，而且您可能需要使用大量的CSS代码，这与旧版（＜9）IE版本不兼容。

概念如下：

  1. 水平和垂直居中一个外部div（如果您的body高度不固定，则很难）
  2. 给它一个max-height：100％
  3. 在此div中创建一个与顶部对齐的内部div。

如果您想，我可以在jsfiddle上为您做到这一点。

嗨MaXX。这对我来说很有意义，但是当顶部只剩下100像素的空间时，是什么阻止了外部div向上扩展？ - Adam McArthur
1
嗨，亚当。max-height: 100%将防止这种情况发生。难点是在身体高度未知的情况下垂直居中位置。 - peterh
-4

请确保您已启用HTML5声明，方法是使用<!DOCTYPE html>。

然后，使用<center style="width:100%;"></center>标签来使您的元素居中。

上述标签内的任何元素都将居中且具有响应性。

它并没有解决垂直居中的问题。（而且也违反了HTML5标准，尽管大多数浏览器都可以处理。使用<div style="width: 100%; text-align: center">会更好） - peterh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接