水平居中
1.margin: 0 auto ,width:npx
margin:auto
效果图
出现水平滚动条
代码：http://js.jirengu.com/cazop/1/edit?html,css,output
特点 ：当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
2.margin:0 auto,max-width
max-width
效果图
没有出现滚动条
代码：http://js.jirengu.com/cade/1/edit?html,css,output
特点:针对上一条的改进，在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！
3.margin: 0 auto,width:n%
效果图
不会出现滚动条
代码：http://js.jirengu.com/renal/1/edit?html,css,output
特点:宽度自适应,没有滚动条
垂直居中
设上下padding撑起高度居中
效果图
image.png
代码：http://js.jirengu.com/majaf/2/edit
特点:高度由内容撑开
文字居中
效果图
image.png
代码：http://js.jirengu.com/davox/2/edit
绝对定位居中
效果图
image.png
图片居中
代码：http://js.jirengu.com/cezeb/1/edit?html,css,output
http://js.jirengu.com/vohe/1/edit?html,css,output
vertical-align实现居中
效果图
图片居中
代码：http://js.jirengu.com/sivid/1/edit
table-cell实现居中
效果图
image.png
代码：http://js.jirengu.com/zadoz/1/edit
