中心div垂直在%高度div？

Question

是否可以在%高度div中垂直居中？

Answer 1

在这里以及整个互联网上都有足够的时间.快速搜索将为您带来大量的结果.无论如何,我这样做的首选方法是使用display: table-cell;和vertical-align: middle;.有关示例,请参阅此页面.(请注意,这在IE6上不起作用.)

Answer 2

如果你的内部div有绝对的高度(比方说100px),你可以这样做:

.outerdiv{
  position: relative; //or absolute, or fixed
  height: 80%;
}

.innerdiv{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;  // it's at 50% but not really centered
  margin-top: -50px; // so just move it up by the half of its height :D
}

我不喜欢这个解决方案非常mutch并且我确信还有很多其他的可能性(可能使用表格或者display: table-cell;) - 但这是我想到的第一个......