在div中垂直对齐div？

Question

当内部div具有静态高度时，垂直对齐另一个div内的div的好方法是什么？ 至于高度有时会有所不同。 http://jsfiddle.net/daCt3/

HTML：

<div id="footer">
 <div id="footerLeft">
 <div id="copyright">
 <!-- <copy> -->Copyright MyCorp &copy; 2013<!-- </copy> -->
     <br>Some more random stuff
 </div>
 </div>
 <div id="footer-right">

 </div>
</div>

CSS：

/*-- FOOTER --*/

#footer {
    bottom:0px;
    width:100%;
    padding-bottom:20px;
    padding-top:0px;
    background-color:#2C2E31;
    border-top:#242426 solid 2px;
    position:fixed;
    height:100px;

}

#footerLeft {
    margin-top:50px;
    float:left;
    width:300px;
    background-color:red;
}

Answer 1

大多数人在自己的网站中使用浮动框（用于显示粘滞行为），列视图的边距单位（％）。 以google.org为例。

Answer 2

此处的文章中描述了一种解决方案： http : //www.jakpsatweb.cz/css/css-vertical-center-solution.html

我已经更新了CSS，看起来像这样：

CSS：

#footer {
  height: 400px;
  overflow: hidden;

  /* styling */
  bottom:0px;             
  width:100%;
  background-color:#2C2E31;
  border-top: #242426 solid 2px;
  height: 100px;
  position: fixed;
}
#footer[id] {
  display: table;
  position: fixed;
}

#footerLeft {
  position: absolute;
  top: 50%;
} /* for quirk explorer only*/

#footerLeft[id] {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  position: static;
}

#copyright {
  position: relative; 
  top: -50%;

  /* styling */
  background: red;
  width: 300px;
} /* for quirk explorer only */

您可以在此处查看示例： http : //jsfiddle.net/UbzcC/1/