0

我创建了一个 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 水平居中于另一个内部时。我以 % 指定内部 div 的高度（例如 50%），然后将 margin-top 和 margin-bottom 指定为其余部分（例如 (100 - 50) / 2 = 25 %）。

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

从 Parent 计算边距有效，但对我来说这是不可能的，因为我无法访问 div 的父级，因为元素样式对象通过 knockout.js 绑定到对象，它并不像 jsFiddle 中所示的那么简单.

希望有人可以帮助我:-)

bj99

更新：

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

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

'margin-top', 'margin-bottom' 百分比：指包含块的宽度

而不是我坚持到高度：-/

4

3 回答 3

1

到#inner元素：

1) 添加position:absolute

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

3) 添加top:25%

就是这样！

于 2013-01-14T14:04:27.760 回答
0

这是解决您问题的方法。希望对您有所帮助

.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;
}
于 2013-01-14T14:04:28.273 回答
0

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

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

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

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

于 2013-01-14T14:10:56.367 回答