3

总而言之，在容器中垂直对齐内容的方法很少。这些是主要的方法（如果你现在有一些完全不同的方法，你提供例子会非常慷慨——我会在这里合并）

  1. 使用position和transform属性 - http://jsfiddle.net/EjV4V/3/这个很好，但对我来说，有点过头了，特别是如果我们考虑渲染优化问题。适用于所有现代浏览器，不适用于 IE7。
  2. 使用display: inline-block带有一个附加辅助块的属性 - http://jsfiddle.net/mmxm4/3/。因为使用了额外的 DOM 元素，所以不认为这种方法很好。在 IE7 中不起作用。值得一提的是（感谢@nclenorton 提到这一点），我们可以使用:before或:after生成内容。但是，再一次 -不在 IE7 中。
  3. 使用display: table和display: table-cell属性 - http://jsfiddle.net/Ppk3p/2/。有时这种方法很简洁，有时则不然。请注意，与提供的其他示例相反，子单元格宽度存在问题。无论如何，在IE7中不起作用。

  4. 使用display: box- http://jsfiddle.net/9Phgg/9/ - 这是处理事情的最性感方式，但正如我们所知，规范并非 100% 完成。此外，Opera 不支持弹性盒子。是的，当然，甚至不要考虑在 IE7 中尝试这样的事情。

    我的问题是：“关于上述所有方法在 IE7 中都将失败的事实，在所有现代浏览器和IE7 中垂直居中元素的最通用、优雅、简单和正确的方法是什么？”。

    我有一种强烈的感觉，helas，虽然现在是 2012 年，但使用表格布局仍然是答案。我见过一些奇特的方法，例如使用position: absolute甚至是 javascript 表达式，但这远非优雅和简单。

经验丰富的 html 开发人员，如果我错了，请纠正我。

UPD： 实际上，还有另一种方法，但我发现它完全错误且不可行，原因有很多。但值得一提。默认情况下，按钮中的任何内容都垂直居中，所以请注意 - http://jsfiddle.net/s5nz4/3/。这将在 IE7 中工作，但我们都是成年人，我希望，理解这是不合适的 )))

4

5 回答 5

3

如果我需要 IE7 支持，我倾向于选择“display: inline-block带有额外元素”的方法。这在 IE7 中确实有效，只需稍作改动，这里有一个示例。

如果我不需要IE7支持，我通常使用该display: table-cell方法。

有时，我不能使用该display: table-cell方法，通常是当我需要在元素底部使用绝对定位的东西时display: table-cell。position: relative至少在 Firefox 中不适用于表格单元格。在这些情况下，我使用该display: inline-block方法，除了通过 插入“额外元素” :before，这使 HTML 保持干净。

于 2012-07-04T16:13:46.080 回答
1

如果您知道要居中的高度，则可以使用绝对将框定位在距顶部 50% 的位置，然后使用框高度一半的负边距将其居中。让它在 ie7 上运行非常复杂，但它确实有效。

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-and-vertically/

例子：

.center {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
}
于 2012-07-04T16:13:02.400 回答
1

这不是最好的方法，但您可以使用两个 div 来强制粉红色框始终居中，一个“推动”另一个：

http://jsfiddle.net/EjV4V/25/

这种方法应该适用于 IE7，尽管您总是必须使用固定边距。

于 2012-07-04T16:40:42.540 回答
1

虽然它在 IE7 中不起作用，但使用伪元素而不是“spreader”应该适用于所有主要浏览器：http: //jsfiddle.net/mmxm4/6/

至于 IE <= 7，after我想，添加.htc 行为创建一个带有类的元素并不是犯罪。至少，不超过使用 PIE。

这是代码（在几个项目中测试过）：

<PUBLIC:COMPONENT lightWeight="true">
<!-- saved from url=(0014)about:internet -->

    <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="append_after()" />
    <PUBLIC:ATTACH EVENT="ondocumentload" FOR="element" ONEVENT="append_after()" />

    <script type="text/javascript">
        function append_after() {
            if (!this.after) {
                var el = element,
                    doc = el.document,
                    aft_el = doc.createElement('div');

                this.after = "true";
                aft_el.setAttribute('class', 'after');
                this.appendChild(aft_el);
                aft_el.outerHTML = aft_el.outerHTML;

                this.runtimeStyle.behavior = "none";
            }
        }
    </script>

</PUBLIC:COMPONENT>

如果您使用条件类，只需添加如下内容：

.lte-ie7 .parent {
  behavior: url(/path/from/the/site/root/after.htc);
}

然后，对于这两个inline-block元素，添加display: inline; zoom: 1;到样式中。不过，更优雅的解决方案是使用“跨浏览器内联块”技术：为内联块定义一个全局类，并在需要的地方使用它：

.inline-block {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: top;
}

.lte-ie7 .inline-block {
    display: inline;
    zoom: 1;
}
于 2012-07-04T16:53:22.427 回答
0

对此的 CSS3 解决方案是box-align

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-pack

但某些浏览器不支持它，所以我会使用一些 jQuery 插件，例如：

http://www.nealgrosskopf.com/tech/thread.php?pid=37

于 2012-07-04T16:16:30.310 回答