在包装器内垂直居中两个div（动态内容和内容在包装器下面）

Question

我正试图将动态高度中的两个div放在一个动态包装器中...我一直在玩各种各样的技巧试图让这个跨浏览器工作无效，有没有人有建议？见图解说明！紫色块是内容的另一个块，我想要比动态包装器低20px。

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

Answer 1

在块上使用display: inline-block + vertical-align: middle，这样它们就会像您希望的那样对齐。

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

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

Answer 2

如果您将包装器div设为posititon: relative。然后将绿色div设为position: absolute，您可以将其垂直居中。以下是一个示例：http://jsfiddle.net/56Ase/

Answer 3

所以我对你的问题进行了快速捅，这不是一个非常大的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定位，这显然不是动态的。 ：）

Answer 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;
}