1.flex流布局
使用屬性：
justify-content：center；
align-items：center；
*/justify-content 決定項目在主軸上的對齊方式
align-items 決定項目在交叉軸上的對齊方式
改變布局的橫縱軸后控制水平和垂直對齊方式的屬性改變，但控制主軸或交叉軸的對齊方式的屬性不改變。*/
2.一般布局，或者modal模態彈出框
使用屬性：
vertical-align: middle;
align-items: center;
或
使用屬性：
text-align:center;
align-items:center;
*text-align為水平對齊方式。用於塊級元素上，設置塊級元素的內聯元素的對齊方式。
3.塊級元素
width:400px;
margin-left:auto;
margin-right:right;
設置元素的寬度值，並令左右外邊距值為auto，瀏覽器會自動為其分配相同的左右外邊距值，使其居中顯示。
4.圖片居中
方法1.將放置圖片的容器的布局改為
display: table-cell;
text-align: center;
可以使容器內的元素均居中顯示。效果如下：
如果需要水平垂直居中，添加
display: table-cell;
text-align: center;
vertical-align: middle;
效果如下：
