元素居中的幾種方法：
① 塊級元素margin:0 auto;
針對嵌套的盒子元素，子元素在父元素中居中，只在水平方向上有效，浮動流排版中不可用
② 內聯元素text-align:center;
對塊級元素設置此屬性，使得盒子內的內聯元素居中，一般包括文字/圖片等
③ 背景background-position:center top;
主要實現背景圖片的居中
④ 文字行內垂直居中
一行文字垂直居中：文字行高line-height的值與盒子的高度一致
多行文字垂直居中：文字內邊距設置padding: (height-行高*行數)/2;box-sizing:border-box;
⑤ 絕對定位水平居中：絕對定位元素的left:50%; 然后設置絕對定位元素的margin-left:-元素寬度的一半
但在企業開發中，推薦使用以下方法讓元素居中：(不需要清楚元素的寬度)
水平居中：left: 50%; transform:translateX(-50%);
垂直居中：top:50%; transform:translateY(-50%);
⑥ 當圖片元素尺寸大於父元素
text-align:center與margin:0 auto;不會使圖片居中，可以：圖片設置屬性margin:0 -100%; 並且父元素設置text-align:center;
⑦ 彈性布局方式
主軸對齊方式：justify-content:flex-start/flex-end/center/space-between/space-around;
側軸對其方式：align-items:flex-start/flex-end/center/baseline/stretch(伸縮項不能設置高度，否則拉伸失效)