当内容的高度可变时，垂直对齐div内容的最佳方法是什么？在我的特定情况下，容器div的高度是固定的，但是如果有一种解决方案在容器的高度也可变的情况下也能奏效，那就太好了。另外，我希望不使用CSS hacks和/或者使用非语义标记，或者很少使用CSS hacks和/或者非语义标记的解决方案。

解决方案

回答

这是我多次需要做的事情，并且一致的解决方案仍然需要我们添加一些非语义标记和一些特定于浏览器的技巧。当我们获得浏览器对CSS 3的支持时，我们将获得垂直居中的位置而不会产生任何问题。

为了更好地解释该技术，我们可以看一下我改编而成的文章，但基本上，它涉及在IE和支持在非表元素上支持" position：table \ table-cell"的浏览器中添加一个额外的元素并应用不同的样式。

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

有多种方法(技巧)可在特定的浏览器集中应用样式。我使用了条件注释，但请看上面链接的文章，以了解其他两种技术。

注意：如果我们事先知道一些高度，试图将一行文本居中，或者在其他几种情况下，有几种简单的方法可以使垂直居中。如果我们有更多详细信息，请把它们放进去，因为可能有一种方法不需要浏览器入侵或者非语义标记。

更新：我们开始获得更好的CSS3浏览器支持，将flex-box和transforms作为获取垂直居中(包括其他效果)的替代方法。有关现代方法的更多信息，请参见另一个问题，但是请记住，浏览器对CSS3的支持仍然是粗略的。