我以前一直都搞不清楚水平居中與垂直居中，更不用談什麽對齊，臨時抱佛腳，也找不到很好的答案，於是把網上的代碼研究了一番，總結一下經驗：

盒子水平居中：margin：0 auto

註意：在IE8中使用margin:auto屬性無法正常工作，除非聲明 !DOCTYPE

如果寬度是100％，對齊是沒有效果的，要給居中的元素一個寬度，否則無效。

加入margin:0 auto就不能加入float浮動樣式，避免邏輯錯誤，造成布局居中不兼容。

行內元素水平居中：父元素設置text-align：center

單行文本垂直居中：line-height=height

通用垂直居中：

塊級元素垂直居中：定位+margin

塊級元素垂直居中：利用padding-top與padding-bottom相等來實現

文字與圖片對齊：

①移動端：彈性布局兼容性較好：display:flex;

box-align: center;

align-items: center;

②PC端：彈性布局兼容性差，因此：用display：table就可以了

③文字與圖片在同一個div中，給這個div設置vertical-align：middle

④將圖片設置為背景圖，然後給文字盒子一個padding-left

⑤圖片在父盒子中，文字在子盒子中，然後用margin控制對齊

　　　⑥定位也可以用來居中，但是比較繁雜

水平居中與垂直居中，以及對齊