【问题标题】：Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)在包装器内垂直居中两个 div（动态内容和包装器下方的内容）
【发布时间】：2011-11-10 05:00:11
【问题描述】：

我正在尝试在动态包装器中将两个具有动态高度的 div 居中...我一直在玩各种技巧来尝试让这个工作的跨浏览器无济于事，有人有什么建议吗？看图解释！紫色块是我希望位于动态包装器下方 20 像素的另一个内容块。

注意：对于红色框左侧的注释，我的意思是说“它应该缩放到与包含的 div（绿色或红色）更高的那个一样高。
我也不知道红色或绿色的盒子会更高 - 只是绿色盒子的高度是动态的，红色的高度是固定的。

【问题讨论】：

你会接受 jquery 解决方案吗？
如果它可能是轻量级的，那么最大的问题是我不知道红色或绿色的盒子会更高。

标签： html css layout

【解决方案1】：

如果您将包装器 div 设置为 posititon: relative。然后让绿色的div 成为position: absolute，你可以让它垂直居中。这是一个例子：http://jsfiddle.net/56Ase/

【讨论】：

这个有问题……不知道红框还是绿框会高一点。
这也依赖于我知道绿色框的高度（顶部：50%，边距顶部：-halfheight;）。我不知道绿色框的高度是多少。

【解决方案2】：

所以我对你的问题有一个快速的回答，它不是一个非常大的 jQuery 解决方案，事实上它是如此简单，即使我也能做到！

我所做的是动态计算出哪个 div 更大（即红色或绿色更大），然后我们忽略更大的 div 并为更小的 div 计算出正确的垂直边距。

查看此示例以更好地理解：http://jsfiddle.net/6fN48/

CSS

 #wrapper
{ width: 400px; border: 1px solid blue; padding: 10px; margin: 0 auto; }

#wrapper .red
{ width: 195px; float: left; border: 1px solid red; }

#wrapper .green
{ width: 195px; float: right; border: 1px solid green; }

jQuery

var r = $('#wrapper .red').outerHeight();
var g = $('#wrapper .green').outerHeight();
var w = $('#wrapper').outerHeight();

/* calculate which is bigger and apply the margin to that element */

/* is the red or green div bigger? */
if(r > g){

    /* ok red is bigger, then work out the top margin to apply onto green */
    var x = (w - g) / 2;

    /* apply CSS to the green div */
    $('#wrapper .green').css({ 'margin-top' : x + 'px' });

} else if(r < g){

     /* ok green is bigger, then work out the top margin to apply onto red*/
    var x = (w - r) / 2;

    /* apply CSS to the red div */
    $('#wrapper .red').css({ 'margin-top' : x + 'px' });

}

HTML

<div id="wrapper">
    <div class="red">
        Lorem ....
    </div>
    <div class="green">
        Lorem ipsum dolor ...
    </div>
    <br clear="all" />
</div>

我希望这会有所帮助，唯一的另一种方法是使用已知高度的 css 定位，这显然不是动态的。 :)

【讨论】：

【解决方案3】：

在块上使用display: inline-block + vertical-align: middle，这样它们就会按照你想要的方式对齐。

看这个例子：http://jsfiddle.net/kizu/Tky8T/

更重要的是：红色 div 的高度也可以是动态的！

【讨论】：

我喜欢这个实现，但是如果文本很长，它不会正确换行到下一行。
我无法让它工作。即使经过 18 年的合作，HTML 也能让我感到惊讶。
@AttilaFulop 我遇到了一个问题，很长一段时间都没有工作......然后我意识到，因为我有<div> 标签，所以我使用了float: left;，这就是阻止inline-block 的原因从正常工作。只有浏览器不会告诉你！

【解决方案4】：

为什么不使用 flex？

.wrapper {
  height: 200px;
  position: relative;
}

.green {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

【讨论】：