我以前一直都搞不清楚水平居中與垂直居中，更不用談什么對齊，臨時抱佛腳，也找不到很好的答案，於是把網上的代碼研究了一番，總結一下經驗：
盒子水平居中：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控制對齊
⑥定位也可以用來居中，但是比較繁雜