Question

总结一下，在容器中垂直对齐内容的方法很少。这些是主要的方法（如果你现在有一些完全不同的方法，那么提供例子你会非常慷慨 - 我会在这里加入它）

使用position和transform属性 - http://jsfiddle.net/EjV4V/3/这个很好，但就我而言，有点矫枉过正，特别是如果我们考虑渲染优化问题。将在所有现代浏览器中工作，在IE7中不起作用。
使用display: inline-block属性和一个额外的辅助块 - http://jsfiddle.net/mmxm4/3/。因为使用额外的DOM元素不认为这种方法是好的。在IE7中不起作用。值得一提的是（感谢@nclenorton提到这一点），我们可以使用:before或:after生成的内容。但是，再一次 - not in IE7。
使用display: table和display: table-cell属性 - http://jsfiddle.net/Ppk3p/2/。有时这种方法很整洁，有时候不是。注意，与提供的其他示例相反，子单元格宽度存在问题。无论如何，在IE7中都行不通。
使用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，但我希望，我们都是这里的成年人，了解这是不合适的）））

Answer 1

如果我需要IE7支持，我倾向于选择带有额外元素的“display: inline-block”方法。这个在IE7中使用small change，这里是an example。

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

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

Answer 2

如果你知道你居中的高度你可以使用绝对位置从顶部50％的框，然后使用框的高度的一半的负边距使其居中。让它工作起来非常复杂ie7但它确实有效。

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

示例：

.center {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
}

Answer 3

不是最好的方法，但你可以使用两个div来强制粉红色的盒子始终居中，一个＆＃34;推动＆＃34;另一个：

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

这种方法应该适用于IE7，但你总是必须使用固定的边距。

Answer 4

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

至于IE＆lt; = 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;添加到样式中。但更优雅的解决方案是使用“Cross-browser inline-block”技术：为内联块定义一个全局类，并在需要的地方使用它：

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

.lte-ie7 .inline-block {
    display: inline;
    zoom: 1;
}

Answer 5

CSS3解决方案是box-align

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

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

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

我们可以想到最简单的垂直对齐

5 个答案: