CSS：当不知道div的固定大小时垂直对齐div

Posted 2023-03-05

技术标签:

【中文标题】CSS：当不知道div的固定大小时垂直对齐div【英文标题】：CSS: Vertically align div when no fixed size of the div is known 【发布时间】：2011-11-04 14:51:12 【问题描述】：

如何将包含图像（或 Flash）的 <div> 与 CSS 垂直对齐。高度和宽度是动态的。

【问题讨论】：

可能重复：***.com/questions/79461/… 你试过了吗？ http://phrogz.net/css/vertical-align/index.html 是的，我做到了，但他们只在他们知道身高的情况下这样做......而且它对我也不起作用所有高度都是动态的和未知的吗？对于图像/闪存及其容器？它必须绝对定位或放置在某些内容附近，还是相对于视口定位？我正在尝试将内容集中在此页面best-games-house.com/play/35/red-riot（适用于网站上的任何全屏播放） 【参考方案1】：

捷克网络开发人员 Dušan Janovský 前段时间为此发布了一个跨浏览器解决方案。阅读http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

【讨论】：

这要么需要 IE hack，要么需要多个嵌套的 divs。这都糟透了。 +1 - @Rikudo Sennin，这篇文章写于 2004 年并于 2008 年更新。我还没有测试过，但我认为 IE8/9 不再需要这些 hack。不幸的是，只有 IE7 和 6 还没有消失，OP 也没有说明他是否想要这些。 @Rikudo Sennin 对旧浏览器的嵌套元素和一些 CSS hack 的需求或多或少是预期的限制。不能使用更简单的代码/标记来满足所有 OP 的要求。如果不需要对 IE6/IE7 的支持，hacks 可以简单地省略（只是提醒一下：是你说合理的方式应该是跨浏览器）；使用条件 cmets 左右，您的 CSS 可以验证。请考虑您的 -1 是否合法。这不是因为我对自己的声誉感兴趣，而是您可以通过将合适的答案标记为“无用”来混淆 OP。【参考方案2】：

如果您知道要居中的图像或 Flash 对象的高度，这是可能的。您不需要知道容器的高度/宽度，但您需要知道包含的高度/宽度。

可以使用浮动、清晰和负边距。示例：www.laurenackley.com 主页。

html

<div id='container'><!-- container can be BODY -->
  <div id='vertical-center'>&nbsp;</div>
  <div id='contained-with-known-height'>
    <p>stuff</p>
  </div>  
</div>

css

#vertical-center
  height:50%;
  width:1px;
  float:left;
  margin-bottom:-50px;/** 1/2 of inner div's known height **/


#contained-with-known-height
  height:100px;
  clear:left;
  margin:0 auto;/** horizontal center **/
  width:700px;
  text-align:left;

#container/** or body **/
  text-align:center;
  /** width and height unknown **/

如果您不知道内部元素的宽度/高度。你对<div> 不走运。但是 -- 表格单元格 (<td>) 确实支持vertical-align:middle; 如果您无法使用上面的 div 内容完成它，请在容器内放置一个表格，然后将您所在的 div在 td 中居中，中间垂直对齐。

【讨论】：

阅读问题。他不想对齐 div 中的内容，他想对齐 div 本身。我确实读过这个问题，这个例子中的“div 本身”是#contained-with-known-height——假设内容的高度是已知的，而容器是未知的。问题和 cmets 没有说明哪个是未知数，或者两者都是未知数。这就是为什么我在示例下面解决了这个问题。阅读我的答案。但他说他不知道宽度或高度，因此该解决方案实际上是无用的。我不同意这一点。表格是有目的的，您不必成为 div 的纯粹主义者。 div布局中的表格怎么样？听起来垂直对齐属性可能会派上用场，不是吗？表格是为了一件事，呈现表格中的数据，而不是布局你的代码，因为它更容易。这不是语义，它可能会影响页面的性能和搜索引擎排名。【参考方案3】：

如果您不关心 IE7 及以下版本，则不必使用多个嵌套 div。如果您有一个要垂直对齐的 div，则该 div 位于某个容器内（即使该容器是您的 <body>）。所以你可以在容器上指定display: table-cell和vertical-align: middle，这样你的div就会垂直居中了。

但是，如果您确实关心 IE7 及以下版本，则需要一个额外的容器才能使其工作（是的，通过 hack）。

看看this fiddle。它在 IE6-9 和其他主要浏览器中正确显示。 #container2 仅适用于 IE7 及以下版本，因此如果您不关心它们，可以将其以及 IE 特定的条件样式删除。

【讨论】：

【参考方案4】：

我会推荐 Bruno 的这个解决方案：http://www.brunildo.org/test/img_center.html

但是，我在使用他的 webkit 解决方案时遇到了问题。如果允许空的span 存在，webkit 似乎在div 的顶部呈现了一个小空间。所以，对于我的解决方案，如果我检测到浏览器是 IE，我只会添加空跨度（如果有人想出如何摆脱空间，请告诉我！）所以，我的解决方案最终是：

HTML：

<div class="outerdiv">
    <img src="..." /> 
</div>

CSS：

.outerdiv 
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;

.ie_vertical_align * 
    vertical-align: middle;

.ie_vertical_align span 
    display: inline-block;
    height: 150px;
    width: 0;

如果我检测到浏览器是 IE，我会在 img 标记和 css 样式之前添加一个空的 span 元素，因此它看起来像：

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

这是带有此代码的JSFiddle。

【讨论】：

我有点困惑。您正在使用宽度：200px；高度：150px；这些数字是从哪里来的？不知道图片大小怎么办？嗯，这些数字只是外部容器的任意界限。查看您的网站，这些数字可能是窗口的大小，即宽度：100%，高度：100%。【参考方案5】：

您可以通过使用内联块来做到这一点，其中一个带有 height: 100%（HTML 和 BODY 的高度相同）和 vertical-align: middle。

示例 1：http://jsfiddle.net/kizu/TQX9b/（内容很多，所以是全角）

示例 2：http://jsfiddle.net/kizu/TQX9b/2/（任意大小的图片）

在这个例子中我使用spans，所以它可以在没有黑客攻击的情况下在IE中工作，如果你想使用divs，不要忘记为IE添加条件注释.helper, .content display: inline; zoom: 1; ，所以inline-blocks 适用于块元素。

【讨论】：

相当不错，但是当浏览器窗口变窄时，内容会移动到“下一行”。知道如何解决吗？啊，是啊，既然是inline-blocks，你可以使用white-space: nowrap来防止这种情况：jsfiddle.net/kizu/TQX9b/3 不错！如果您使用带有height: 100%; 和position: absolute; jsfiddle.net/TQX9b/256 和position: fixed; 和jsfiddle.net/TQX9b/257 的另一个包装器，您也可以跳过html 和body 样式，这为将其应用于布局提供了更多的灵活性。在 FF、IE7-10 中测试... 这实际上可能是让vertical-align 在position: absolute 元素中工作的唯一方法：我使用table-cell 的所有其他尝试都没有提升高度。我认为页面上的最佳答案！还有一点需要注意：您可以将它与任何display:block 内容一起使用来代替图像，并且当嵌套在响应式固定纵横比元素中时，它也可以正常工作。 Here's an example of both of these 还演示了另一种可能的多行换行文本方法。缺点：标记开始变得有点复杂......【参考方案6】：

将图片设置为div的背景并居中对齐

【讨论】：

【参考方案7】：

这是一个纯 CSS2 解决方案，用于水平和垂直居中，无需知道容器或子项的大小。不涉及任何黑客行为。我为this answer 发现了它，我也在this answer 中展示了它。

The solution 基于vertical-align: middle 和line-height: 0，其父级具有固定的行高。

HTML：

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract"  />
    </span>
</span>

还有 CSS：

html,
body 
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;

#center 
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
    
#wrap 
    line-height: 0;

#wrap img 
    vertical-align: middle;

在 Win7 的 IE8、IE9、Opera 11.51、Safari 5.0.5、FF 6.0、Chrome 13.0 中测试。

唯一需要注意的是 IE7，其中两个最里面的元素必须在一行中声明，如 in this fiddle 所示：

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract"  /></span>
</span>

请注意，跨度也是 IE7 所必需的。在其他所有浏览器中，span 可能是 div。

【讨论】：

做得很好。这正是许多人正在寻找的，包括我自己。对于需要支持 ie7 的人来说绝对是最干净的解决方法 [叹气] 我编辑了你的小提琴来展示另一个实际的例子。 jsfiddle.net/ryanore/R7szX/2 等待这是一个怎样的答案......所以基本上我可以垂直对齐，但我失去了滚动页面的能力（溢出：隐藏在 html、body 上） @xckpd7 当然不一定是正文；您可以在任何容器元素上使用此解决方案，如 shown here。谢谢！我做了一些改动，(1) 使文本内容看起来不错 (2) 将内容相对于正文以外的元素居中 (3) 使用类而不是 id，因此它是可重用的。 jsfiddle.net/sparebytes/q9sfQ @Rupam 这是一个任意值。这将是设备可以显示的“最大”高度。【参考方案8】：

尝试 50% 的填充技巧：

<html>

<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line; 
     text-align:center; vertical-align:bottom; 
     padding: 50% 0 50% 0">test</div>
</body>

</html>

【讨论】：

【参考方案9】：

除了此处的其他答案之外，CSS3 flexible box model 还可以让您实现这一目标。

您只需要一个容器元素。里面的所有东西都会按照灵活的盒子模型规则进行布局。

<div class="container">
    <img src="/logo.png"/>
</div>

实际上，CSS 非常简单：

.container  
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;

为简洁起见，我省略了供应商前缀规则。

这是一个 img 始终位于页面中心的演示：http://jsfiddle.net/zn8bm/

请注意，Flexbox 是一项新兴规范，目前仅在 Safari、Chrome 和 Firefox 4+ 中实现。

【讨论】：

以上是关于CSS：当不知道div的固定大小时垂直对齐div的主要内容，如果未能解决你的问题，请参考以下文章