方法1
通過margin:0 auto ; text-align:center;實現css水平居中
方法2
通過display:flex（彈性布局）實現css水平居中
父元素：
display:flex;
flex-direction:column; //從上到下垂直排列
而子元素：
align-self:center; //flex子項的對齊方式
方法3
通過display:table-cell和margin-left實現CSS水平居中。
對於父元素和子元素的寬度都確定的情況，適合通過display:table-cell（表格單元格）和margin-left實現CSS水平居中。
使用時，父元素display:table-cell，子元素給剩余寬度一半的margin-left。
方法4
通過position:absolute實現CSS水平居中。
這種方法跟上一個方法適用場景一樣，也是適用於父元素和子元素的寬度都確定的情況。
使用時，父元素position:absolute，子元素給剩余寬度一半的margin-left。
方法5
通過width:fit-content實現CSS水平居中。
這種方法可以確保子元素寬度不確定的情況下，也能實現CSS水平居中。
需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。
方法6
通過display:inline-block（行內塊元素）和text-align:center實現CSS水平居中。
display:inline-block能改父元素內的子元素的表達樣式，同樣需要配合“margin: 0 auto; text-align: center”使用。
方法7
給父元素樣式position:relative，給子元素float:left和margin-left就可以實現CSS水平居中。