在另一个元素内垂直居中两个div

Question

14

我有两个div想要垂直居中在另一个div中。目前我的代码是：

现在我明白这里发生了什么，但我希望左侧div在容器内垂直对齐，右侧div也是如此。但它们作为一对而不是单独地垂直对齐。我尝试了各种方法，但似乎无法使其工作。

- anothershrubery

它们是固定高度还是可变高度？ - Michael Rose

它们实际上都是可变高度的。因此，基本上，容器 div 的高度将与最大的内部 div 相同，较小的 div 应垂直居中。如果必要的话，div 可以是固定高度，但我们不希望设置 margin-top 等属性。 - anothershrubery

我假设从你使用 display: table-cell 的方式来看，你不关心支持 IE7？ - thirtydot

嗯...IE7兼容性不是首要问题。但支持它会很好。一个针对IE7的解决方案和一个针对新版本浏览器的解决方案都会很不错。然后我们再看看最佳实现方式。 - anothershrubery

2个回答

6

使用Flexbox解决垂直居中问题：

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

OP的原始代码被修改了：http://jsfiddle.net/o3pmyb8c/

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

- wdm

糟糕，我把我的橫向做了，現在還早，需要咖啡因 :P - wdm

这些实际上是相互叠加显示的。 - Gubatron

1

@Gubatron修复了（9年后） - wdm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

Instead, use display: inline-block:

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

Due to using display: inline-block, you have to deal with the whitespace issue. I chose to remove the whitespace in the HTML between </div> and <div id="right">. See here for what happens if you don't do that. Removing the whitespace really is the easiest fix, but there are other ways.