要让一个DIV水平居中，只要设置可div的宽度高度就可以使用margin: 0 auto 来让这个DIV水平居中

那么要如何让div垂直居中显示在页面的中间，这里的前提还是先设置div的宽度还有高度才可以，下面是方法还有代码

首先要先设置html还有body的宽度和高度为100%

然后给div本身来个相对定位再根据div本身的宽度高度设置外边距

代码如下

这里你也可以使用绝对定位来设置

上回说到在网页上面用`<canvas>`标签和一个小的javascript库实现了飘雪花的效果。

进来看看，1分钟用HTML5实现的雪花效果——HTML5实例001

有客官提到不知道如何入手学习`<canvas>`这个标签的事，我正好想到了自己曾经为了学习这东西写了一个生成像素风格头像的网页，简单明了，明天分享出来。

一、css宽高自适应：

1.宽度自适应：

元素宽度设为100%（块状元素的默认宽度为100%）

注：应用在通栏效果中

2.高度自适应：

height:auto;或者不设置高度

3.最小，最大高度，最小，最大宽度：

什么是弹性布局？

用户的文字大小与弹性布局

用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过UI控件来改变浏览器默认的字体大小。

弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而其中“相对”的意思是：

把一个div里面的文字居中，大家都很清楚，不就是写css，text-align:center;和line-height:盒子的高度；

<div id="box">我要居中</div>

#box{

width:200px;

height:200px;

border:2px solid red;

margin:50px auto;

line-height:200px;

设置对象宽度以百分比计算，随外级对象宽度变化而自适应按百分比显示宽度，接下来为大家案例演示百分比宽度样式。

假如设置一个css宽度为80%，为了观察效果设置css border为黑色实线边框，css高度为100px，对象css命名为“.thinkcss”

Css代码如下

.thinkcss{margin:0 auto;width:80%;height:150px;border:1px solid #000}