我以前一直都搞不清楚水平居中与垂直居中，更不用谈什么对齐，临时抱佛脚，也找不到很好的答案，于是把网上的代码研究了一番，总结一下经验：

盒子水平居中：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控制对齐

　　　⑥定位也可以用来居中，但是比较繁杂