撑开页面、垂直水平居中方法

在CSS揭秘这本书中有幸学到min-height:calc(100vh-80px);这种撑开页面的方法：

当需要盒子撑开页面以保证底部内容居低而内容多时又会顺应页面文档流，就可以使用min-height:calc(100vh-80px);

calc(),是calculate()计算的缩写；

100vh是视口的高度；

80px则是需要减掉的头部高度和底部内容的高度。

这个方法很有效，减少了之前复杂获取方法的很多代码。

之前垂直居中的方法是：

div{

width:200px;

height:300px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-150px;

}

而css解密这本书中用到了简单的方法：

div{

position:absolute;

left:50%;

top:50%;

transform: translate(-50%, -50%);

}

这个方法相对上边的方法少了很多代码,并且有很好的适用性；相比较而言缺点是IE9及以下版本不支持transform,css3属性。各有利弊吧！可以斟酌使用。