实现原理：
width: 960px;设置外包围框的宽度。
margin: 0 auto;让浏览器自动计算左右 margin，使外包围框居中。
这个居中技巧只限于有设置宽度的容器。
你常常会看到网页选择 960px 这个宽度，这是因为一般浏览器是 1024 宽，加上滚动条就是 1000-1004。960 给滚动条和其他浏览器 UI 预留了足够的空间。 并且 960 这个数字可以 2，3，4，5，6，8，10，12 等数字除尽，方便做网格。
不同显示类型的 HTML 元素需要使用不同的居中技巧。HTML 元素可以简单地分为两大类。
p, div, h1, h2, table, ol 等等
行元素- 在文字流里面显示，浏览器不会添加断行。默认宽度刚好适应内容。
span, img, a, button, input 等等
HTML:
Centered by setting left/right margin.to auto.
-->
Moby Dick
CSS:
.centered-image{display: block;width:25%;margin:0auto;}.centered-container{text-align: center;}
实现原理：
display: block;把行元素变成块元素
margin: 0 auto;居中块元素
元素一定要有width属性
text-align: center;通过容器来居中行元素
使用text-align居中必须经过一个元素的父元素来居中，这会影响在这个容器里所有的元素。 在前面这个例子你可以看到不只是图片居中了, h1 和 p 里面的文字也被居中了。
如果你想要居中一个行元素（比如图片），但不影响同个容器里面的其他元素，那你可以选择把它设定为块元素来居中。
头像修饰
给头像加阴影
box-shadow: 0 0px 2px 1px rgba(0,0,0,0.2);
把头像变成圆形
border-radius: 999px
有关 margin 折叠的细节和用法可以看 http://www.sitepoint.com/web-foundations/collapsing-margins/
具体的属性排序可以按照以下的规则：
定位属性: position, float, z-index, clear
盒模型相关属性: padding, margin, display, width, height, border
字体相关
CSS2 视觉相关属性 (background)
CSS3 属性 (border-radius, box-shadow)
