Html 将两个 div 垂直居中放置在包装器内（包装器下方具有动态内容和内容）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7301334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)
提问by Walker
I'm trying to center two divs with dynamic heights inside a dynamic wrapper... I've been playing with all sorts of tricks to try and get this working cross-browser to no avail, does anyone have a suggestion? See graphic for explanation! The purple block is another block on content I want to sit 20px below the dynamic wrapper.
我正在尝试将两个具有动态高度的 div 居中放置在动态包装器中......我一直在玩各种技巧来尝试让这个跨浏览器工作无济于事，有人有建议吗？看图解释！紫色块是我想要位于动态包装器下方 20 像素的内容上的另一个块。
- NOTE: For the note to the left of the red box, I meant to say "It should scale to be as tall as whichever contained div (green or red) is taller.
- I also do not know whether the red or green box will be taller - just that the green box's height is dynamic and the red's height is fixed.
- 注意：对于红色框左侧的注释，我的意思是说“它应该缩放到与包含的 div（绿色或红色）更高的那个一样高。
- 我也不知道红色框还是绿色框会更高——只是绿色框的高度是动态的，而红色框的高度是固定的。
回答by kizu
Use display: inline-block+ vertical-align: middleon the blocks, so they would be aligned just like you want them to.
在块上使用display: inline-block+ vertical-align: middle，这样它们就会像您希望的那样对齐。
Look at this example: http://jsfiddle.net/kizu/Tky8T/
看这个例子：http: //jsfiddle.net/kizu/Tky8T/
Even more: the height of the red div can be dynamic too!
更重要的是：红色 div 的高度也可以是动态的！
回答by Will
If you make the wrapper divto be posititon: relative. Then have the green divto be position: absolute, you can make it vertically centered. Here is an example: http://jsfiddle.net/56Ase/
如果您将包装器div设为posititon: relative. 然后让绿色div成为position: absolute，你可以让它垂直居中。这是一个例子：http: //jsfiddle.net/56Ase/
回答by Xavier
So I've had a quick poke at your question, it's not a very big jQuery solution, in fact it's so simple that even i could do it !
所以我对你的问题进行了快速的探讨，这不是一个非常大的 jQuery 解决方案，事实上它非常简单，即使我也能做到！
What i did was worked out which div is bigger dynamically (i.e. is red or green bigger), we then ignore the bigger div and work out the correct vertical margin for the smaller div.
我所做的是动态计算出哪个 div 更大（即红色或绿色更大），然后我们忽略较大的 div 并为较小的 div 计算出正确的垂直边距。
View this example for a better understanding: http://jsfiddle.net/6fN48/
查看此示例以更好地理解：http: //jsfiddle.net/6fN48/
CSS
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
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
HTML
<div id="wrapper">
<div class="red">
Lorem ....
</div>
<div class="green">
Lorem ipsum dolor ...
</div>
<br clear="all" />
</div>
I hope this helps, the only other way is to use css positioning with a known height, which obviously is not dynamic. :)
我希望这会有所帮助，唯一的另一种方法是使用已知高度的 css 定位，这显然不是动态的。:)
回答by Greg Woz
Why don't use flex?
为什么不使用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;
}
