css - 垂直对齐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

此处的文章中描述了一种解决方案：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/

Answer 2

用于粘性行为的浮动框，用于列视图的边距中的百分比单位是大多数人在其网站中使用的。检查google.org以获取示例。