CSS 在最小高度容器内垂直对齐？

Question

我做了很多搜索，但找不到 css 解决方案来垂直对齐我的内容。

我在这里看到的所有解决方案和谷歌上的热门文章都要求我有一个内容不能超过的固定高度容器。我不能保证，因为内容是动态生成的。

我唯一可以做的工作是使用一些 javascript 以编程方式测量内部容器并设置其边距顶部。这确实很恶心，但似乎是唯一有效的方法。 :(

请参阅 this js fiddle 了解我想要设置样式的标记的示例。

我很高兴忘记 IE6为此，但需要支持 IE7+ 和最新的 webkit+firefox...

有人知道仅 CSS 的解决方案吗？

Answer 1

据我所知，绝对没有办法仅使用 CSS 在 IE7 中完成此操作，除非您可以使用表格。对于所有合适的浏览器和 IE8，您可以使用 display:table-cell:

http://jsfiddle.net/hGjfY/

和

• < p>将高度设置为200px而不是min-height（表格单元格不支持min-height，高度被解释为min-height）

• 添加条件注释以仅针对 IE7，并添加 min-height:200px；和高度：自动；到内部 div（表格单元格上的高度在 IE7 中无法按预期工作）

• 仅针对 IE7 加载 jQuery 修复，或在 IE7 中使用非居中视图

Answer 2

这是使用您在 jsfiddle 上提供的 HTML 的纯 CSS 方法。它确实需要两个围绕您的内容的包装器 DIVS，但您已经在 HTML 中拥有了它。此解决方案不使用表格或表格单元格，而是使用类似于使用 CSS 的表格和表格单元格的 DIVS。

这是您的 jsfiddle 修改后并正在运行： http://jsfiddle.net/8Mjc3/2/

HTML

<div class="vertical-center-container">
  <div class="vertical-center-table-cell">
    <!-- INSERT CONTENT TO BE VERTICALLY ALIGNED -->
  </div>
</div>

CSS

.vertical-center-container {
    display: table;
    width:100%;
}
.vertical-center-table-cell {
    display: table-cell;
    vertical-align: middle;
}

这是一个修改后的解决方案，使用了我从 Smashing 杂志文章。

Answer 3

@ptriek 答案很好，但如果您还想获得中心水平对齐，那么您需要一个额外的包装器并将其设置为

.outer{ 
    display: table; 
    width: 100%
}
.inner{
    diplay: table-cell;
    vertical-align: middle;
    height: 200px;
    text-align:center;
}

Answer 4

这是我的第一个答案，但希望对您有所帮助！

* {
  font-size: 9px;
}

#container{
    border: 3px solid black;
    text-align:center;
    min-height: 200px;
}

.valign_outer{
}

.valign_inner{
  padding-top: calc( (200px - 9px) * 1.2) ;
  padding-bottom: calc( (200px - 9px) * 1.2);
}

您可以设置任何字体大小。

您可以设置任何最小高度。

您可以选择最适合您的填充倍数。

您可以针对不同的媒体查询重做此计算。

计算如下：calc( (min-width - font-size) * padding-multiplier )

确保两者的填充乘数至少为 0.5。

这是逻辑：

当您设置固定高度或 vh 高度时，这是很棘手的：要么字体大小总是调整大小以不溢出高度，要么在较小的宽度上，您会得到换行符并且文本可能会溢出高度。

并且 font-resize 并不总是最好的：我们可能需要一些 CSS 锁：请参阅 https://fvsch.com/ css-locks/

所以，我们无法确定容器的高度。但是，我们可以定义最小高度。

因此，文本将占据一定的大小，为了使其居中，我们需要相同的 padding-top 和 padding-bottom

现在，可以根据字体大小更好地定义填充。例如，如果字体为 20px，则可以将内边距设置为 20px，但如果字体为 40px，则将内边距设置为 40px。

此外，我们还必须考虑剩余空间。如果 min-height 为 200，则文本至少为 font-size 高。如果有换行，可能会更多，但如果 font-size 是 16px，则文本至少在垂直方向上占据 16px。

因此，在 200 个像素中，我们最多有 200 - 16 = 184 个可用像素，可分为 padding-top 和 padding-bottom。

您必须确保填充至少为 ((min-width - font-size) / 2) 才能解决这种情况！

希望有帮助！