灵活高度垂直定心（IE8+）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了灵活高度垂直定心（IE8+）相关的知识，希望对你有一定的参考价值。

  1. /**
  2.  * IE7 and older - content will start at the top of the viewport.
  3.  *
  4.  *
  5.  * The html markup
  6.  *
  7. <body>
  8.     <div id="body">
  9.         Content goes here
  10.     </div>
  11. </body>
  12.  
  13. */
  14.  
  15.  
  16.  
  17. /**
  18.  * The CSS markup 
  19.  */
  20.  
  21. html,
  22. body {
  23.     width:100%;
  24.     height:100%;
  25. }
  26. html {display:table;}
  27. body {
  28.     display:table-cell;
  29.     vertical-align:middle;
  30. }
  31. #body {
  32.     max-width:50em;
  33.     margin:0 auto;
  34. }

以上是关于灵活高度垂直定心（IE8+）的主要内容，如果未能解决你的问题，请参考以下文章

垂直对齐 2 个浮动 div，高度灵活

CSS 灵活的高度垂直居中与CSS，超越IE7

垂直居中-父元素高度确定的多行文本（方法二）

IE8拉伸表格单元格高度

json 垂直定心 - 绝对定位方法

CSS总结——元素的垂直居中（已知高度/未知高度）