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