真實以本篇為準，有遺漏，歡迎補充
1、水平居中
1.1、行內元素的水平居中（span、文字、圖片、input）
父級 {
text-align: center;
}
1.2、塊級元素水平居中：分情況
>> 有寬度的塊級元素
本身 {
margin: 0 auto;
}
本身 { //推薦
margin-left: auto;
margin-right: auto;
}
>> 寬度不固定的元素：
方法一：定位法
父級{position: relative;}子級{position: absolute;left: 50%;transform:translateX(-50%);}複製程式碼方法2: 通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
.wrap{float:left;position:relative;left:50%;clear:both;}.wrap-center{position: relative;left:-50%;}}複製程式碼 方法3：flex法
父級{display: flex;flex-direction: row;//設定主軸justify-content: center;//主軸方向居中}複製程式碼 2、垂直居中
2.1、行內元素（span、img、文字）垂直居中：
父級 {height : 100px;line-height: 100px;}複製程式碼 2.2、塊級元素：表格佈局法
父級 {display: table-cell;vertical-align: middle;}複製程式碼 3、水平垂直居中：
3.1：必須有寬度：定位法：上下左右為0，margin：auto
本身 {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 200px;height: 200px;background: red;}複製程式碼3.2 有寬度的塊級元素：定位+回移50%法
.center {position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;width: 200px;height: 200px;background: red;}
複製程式碼3.3 flex法：讓元素在父級框裡是水平垂直居中的
.fa{display:flex;flex-direction: row;//確定主軸align-items: center;//交叉軸居中justify-content: center;//主軸居中border: 1px solid greenyellow;}複製程式碼 3.4 grid方式
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
複製程式碼