1. position: absolute; top：50%；left: 50%; margin-top： -高度的一半; margin-left: -寬度的一半（此方法適用於固定寬高的元素）
注： （1）.這些屬性要作用在居中的元素本身 （2）.絕對定位要注意父級的定位
案例：
代碼：
效果：
2. position: absolute; top：50%；left: 50%; transform: translate(-50%, -50%);
注： （1）.這些屬性要作用在居中元素本身 （2）.絕對定位要注意父級的定位
代碼：
效果：
3. position: absolute; top：0；bottom：0；left:0; right: 0;margin; auto;
注： （1）.這些屬性要作用在居中元素本身 （2）.絕對定位要注意父級的定位
代碼：
效果：
4. display:flex; align-items: center; justify-content:center;
注： 這些屬性放在居中元素的父元素上。justify-content設置主軸（x軸）對齊方式 align-items設置側軸（y軸）對齊方式
代碼：
效果：
5. height = line-height ; text-align: center;
注：（1）. 這兩個屬性要放在居中元素的父級上 （2）.塊級元素設置兩個參數一個是height 一個是line-height 會使塊級元素內部的含有行級元素特點的元素（這個元素身上有vertical-align: middle; 屬性）垂直水平居中 (此方法會有些偏差）
代碼：
效果：
