将元素垂直居中于Internet Explorer中的另一个元素中

Question

请查看：

http://jsfiddle.net/UvvPC/

我想使用margin-top移动上面的js小提琴中的灰色框。

我希望灰盒子位于黑匣子的中间，但我被告知margin-top与网络浏览器的搭配并不顺利。

我该使用什么？

谢谢！

Answer 1

在元素之前使用margin-bottom：）

Answer 2

使用display: table-cell在IE6-7中不起作用。如果您担心这一点，可以使用以下技术：

.one {
  background: #151515;
  height: 700px;
  width: 900px;
  margin: 0px auto;
  padding: 0px 0px 0px 0px;
  position: relative;
}

.two {
  background: #e6e6e6;
  height: 140px;
  width: 900px;
  position: absolute;
  top: 50%;
  margin-top: -70px; /* half of the height */
}

http://jsfiddle.net/HYjke/

Answer 3

我不知道您为什么需要使用margin-top来执行此任务。这可能会对您有所帮助：

.one {
    background: #151515;
    height: 700px;
    width: 900px;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
    display:table-cell;
    vertical-align:middle;
}