中心div垂直于它的兄弟div

Question

我有两个兄弟div和一个包含div。

目前的情况是这样的：

我希望两个内部div相对于外部div垂直居中 请注意，外部div具有不断变化的大小，该大小由内部红色div的大小（可以改变）决定，我认为这是具有挑战性的原因。无论如何对我来说......

此处显示的示例来自this jsbin。最佳解决方案是将其修改为有效。

IE9 +

感谢。

Answer 1

如果外部div围绕红色的扩展，你只需要将bart simpsons居中：

http://jsbin.com/foniduvolazo/1/

#outer {
  border: 1px solid black;
  width: 300px;
  position: relative;
}

#side {
  width: 30px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png");
  background-size: contain;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Answer 2

您只需添加vertical-align css规则

即可

#side {
  width: 30px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  vertical-align:middle; /* added this */
  background-image: url("http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png");
  background-size: contain;    
}

#sizey {
  border: 1px solid black;
  height: 100px;
  display: inline-block;
  vertical-align:middle; /* added this */
  width: 150px;
  background-color: red;
}

JS Bin

Answer 3

尝试this

vertical-align: middle;和#side

的

#sizey