将2个Divs垂直对中

Question

我有2个div,我想在另一个div内垂直居中.目前我有:

http://jsfiddle.net/5vpA3/1/

现在我明白这里发生了什么,但我希望左侧div在该容器内垂直对齐,而右侧div则相同.但它们是垂直对齐而不是单独对齐.我尝试过各种各样的东西,但似乎无法让它发挥作用.

Answer 1

现场演示

• float: left从#left和中删除#right.

• 相反,使用display: inline-block:

  #left, #right {
      display: inline-block;
      vertical-align: middle;
  }
  

• 由于使用display: inline-block,你必须处理空白问题.我选择在</div>和之间删除HTML中的空格<div id="right">.如果你不这样做,请看这里会发生什么.删除空白确实是最容易修复的,但还有其他方法.

Answer 2

Flexbox垂直居中解决方案：

#container {
    display: flex;
    align-items: center;
}

OP的原始小提琴修改：http://jsfiddle.net/o3pmyb8c/

如果您还想水平居中，您可以添加justify-content: center;