一、定寬水平居中：
1）使用margin:0 auto; 有良好的兼容性，兼容IE8
2）position:relative;left:50%;margin-left: - 'boxHalf-width' //boxHalf-width指盒子寬度的一半,
這裏position:absolute也是可以的，注意這樣父盒子也要給它一個定位屬性。
3）padding/margin：0 paddingWidth //paddingWidth指盒子的寬度減去當前盒子寬度除二（簡稱：padding/margin剩餘法）
二、不定寬水平居中：
1）父盒子text-align:center;當前盒子display:inline-block；//會影響父盒子內的文本內容
2）position:relative;left:50%;transform:translateX(-50%)； 不兼容IE8等低版本瀏覽器
3）父盒子display:table;子盒子display:table-cell;text-align:center
這裏注意：設置了table-ce'l'l後，子盒子儘量避免使用float和position，可能會受影響；同時使用的margin會失效。
三、定高垂直居中：
1）padding/margin剩餘法
2）position:relative;top:50%;margin-top:-boxHalf-height //boxHalf-width指盒子高度的一半，
這裏要注意：父盒子要處理子盒子的margin-top問題，方式有很多例如，給父盒子overflow:hidden;同樣position:absolute也可以，記得父盒子也要給定位屬性
四、不定高垂直居中：
1）position:relative;top:50%;transform:translateY(-50%) ; //不兼容IE8等低版本瀏覽器
2）父盒子display:table;子盒子display:table-cell;vertial-align:middle;//出現的問題跟上面一樣
五、單行文本垂直居中：
1）父盒子line-height: boxHeight //boxHeight指父盒子的高度
六、多行~n行文本垂直居中
1）父盒子line-height:boxHeight / n
提示一點：元素可以通過display來設置定寬或者是不定寬，然後變通地採用各種方案
還有很多其他的CSS技巧，flex相關的和一些常見的CSS使用方式。先暫時寫這些先。
僅作爲自己工作的總結，可能有很多坑或者不完善的地方，謝謝指出，勿噴！
待續中。。。