Question

我已经创建了一个jsFiddle来演示我的问题：

http://jsfiddle.net/MXt8d/1/

.outer {
  display: inline-block;
  vertical-align: top;
  overflow: visible;
  position: relative;
  width: 100%;
  height: 100%;
  background: red;
}

.inner {
  overflow: hidden;
  height: 50%;
  width: 100%;
  margin-top: 25%;
  margin-bottom: 25%;
  background: blue;
  opacity: 0.7;
  color: white;
}

<div class="outer">
    <div class="inner"></div>
</div>

当我需要将div水平居中于另一个内部时。我以百分比（例如50％）指定内部div的高度，然后指定余量的顶部和边缘底部（例如（100 - 50）/ 2 = 25％）。

但正如你在jsFiddle中看到的那样，它没有按预期工作。

计算父作品中的边距，但是对我来说不可能，因为我没有访问div的父级，因为元素样式的对象通过knockout.js绑定到对象，并不像显示的那么简单在jsFiddle。

希望有人能帮助我： - ）

bj99

更新

刚刚发现为什么会发生这种情况，所以我会在这里发布有类似问题的peaple：

来自http://www.w3.org/TR/CSS2/box.html#propdef-margin-top：

'margin-top'，'margin-bottom'   百分比：参考包含块
的宽度

而不是因为我选择身高： - /

Answer 1

到#inner元素：

1）添加position:absolute

2）删除margin-top和margin-bottom属性

3）添加top:25%

就是这样！

Answer 2

这是你问题的解决方案。我希望我帮助你

.inner {
  overflow: hidden;
  height: 50%;
  width: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  position: absolute;
  margin: auto;
  background: blue;
  opacity: 0.7;
  color: white;
}

Answer 3

您的问题有多种解决方案：

1）在内部元素上添加position:absolute和top:25% - Example

2）在外部使用display:table，在内部元素上使用display:table-cell，这也允许垂直居中。 - Example

每个解决方案都有一些注意事项，我个人尽量避免绝对定位，但这也取决于个人喜好。

百分比和CSS边距

3 个答案: