一、水平居中：

1、內(nèi)聯(lián)元素。利用 text-align: center; 可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。
2、塊級元素。通過把固定寬度塊級元素的margin-left和margin-right設(shè)成auto。 margin: 0 auto;。
3、多塊級元素
（1）利用inline-block。設(shè)置塊級元素的顯示類型為inline-block和父容器的text-align屬性。
（2）利用display: flex。彈性布局。設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式，子元素水平居中顯示)（display: flex;justify-content: center;)。

二、垂直居中：

1、單行內(nèi)聯(lián)元素。設(shè)置內(nèi)聯(lián)元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。height: 120px;line-height: 120px;。
2、多行元素
（1）利用表布局。父元素：display: table;子元素：display: table-cell;vertical-align: middle;。
（2）利用flex布局。父元素：display: flex;flex-direction: column;justify-content: center;。
（3）利用“精靈元素”。父容器內(nèi)放一個100%高度的偽元素，讓文本和偽元素垂直對齊。
3、塊級元素
（1）固定高度的塊級元素。絕對定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半。
（2）未知高度的塊級元素。CSS3中的transform屬性向Y軸反向偏移50%.父級相對定位。子級絕對定位；top:50%;transform:translateY(-50%);)

三、水平垂直居中：

1、固定寬高元素。通過margin平移元素整體寬度的一半。
2、未知寬高元素
（1）利用2D變換，在水平和垂直兩個方向都向反向平移寬高的一半。父級相對定位。子級絕對定位；top:50%;left:50%;transform:translate(-50%，-50%);）
（2）利用flex布局（父元素：display: flex;justify-content: center;align-items: center;）