Question

我一直在进行大量搜索，无法找到垂直对齐我的内容的CSS解决方案。

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

我能做的唯一后备是一些javascript以编程方式测量内部容器并设置其margin-top。这真的是icky，但似乎是唯一的方式。：（

有关我要设置样式的标记示例，请参阅this js fiddle。

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

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

Answer 1

据我所知，只有CSS才能在IE7中完成绝对没有办法，除非你可以使用表格。对于所有体面的浏览器和IE8，您可以使用display：table-cell：

http://jsfiddle.net/hGjfY/

和

将高度设置为200px而不是min-height（表格单元格不支持min-height，高度被解释为min-height）
添加条件注释仅限目标IE7，并添加min-height：200px;和身高：汽车;到内部div（高度在表格单元格中的IE7中无法正常工作）
仅为IE7加载jQuery修复，或在IE7中使用非居中视图

Answer 2

这是一种仅使用CSS的方法，使用您在jsfiddle上提供的HTML。它确实需要围绕您的内容包含两个包装器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 Magazine article使用表格单元格方法了解垂直对齐。

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（（最小宽度-字体大小）*填充倍数）

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

这是逻辑：

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

字体调整大小并不总是最好的：我们可能需要一些CSS锁：请参见https://fvsch.com/css-locks/

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

因此，文本将占据一定的大小，并且要居中，我们想要相同的padding-top和padding-bottom

现在，根据字体大小更好地定义填充。如果font为20px，则可能使填充为20px，但是如果font为40px，则使填充为40px。

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

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

您必须确保填充至少为（（min-width-font-size）/ 2）才能解决此问题！

希望有帮助！

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

4 个答案: