我以前一直都搞不清楚水平居中与垂直居中，更不用谈什么对齐，临时抱佛脚，也找不到很好的答案，于是把网上的代码研究了一番，总结一下经验：
盒子水平居中：margin：0 auto
注意：在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE
如果宽度是100％，对齐是没有效果的，要给居中的元素一个宽度，否则无效。
加入margin:0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。
行内元素水平居中：父元素设置text-align：center
单行文本垂直居中：line-height=height
通用垂直居中：父盒子：display：table子盒子：display：table-cell vertical-aglign：middle 低版本ie：子盒子：display：inline-block（这个个人感觉最好用！！）
块级元素垂直居中：定位+margin
块级元素垂直居中：利用padding-top与padding-bottom相等来实现
文字与图片对齐：
①移动端：弹性布局兼容性较好：display:flex;
box-align: center;
align-items: center;
②PC端：弹性布局兼容性差，因此：用display：table就可以了
③文字与图片在同一个div中，给这个div设置vertical-align：middle
④将图片设置为背景图，然后给文字盒子一个padding-left
⑤图片在父盒子中，文字在子盒子中，然后用margin控制对齐
⑥定位也可以用来居中，但是比较繁杂
原文：http://www.cnblogs.com/wherep/p/6980300.html