方法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水平居中。
css 水平居中的方法
文字居中，文字垂直居中水平居中，居中，水平居中垂直居中，塊元素垂直居中?當我們在做前端開發是時候關於css居中的問題是很常見的。情況有很多種，不同的情況又有不同的解決方式。水平居中的方式解決的時候相對來說通過css比較容易設定，垂直居中相對比較棘手。先來說一下水平居中的不同情況與不同解決方法吧。1文...
css實現水平居中的方法
一直想寫一篇關於水平居中的文章，因為水平居中是平時寫介面最常用到的。那麼如何實現呢，我根據自己的經驗以及網上的經驗，做了乙個小小的總結。最簡單的margin方法 center 優點 實現方法簡單易懂，瀏覽器相容性強 缺點 擴充套件性差 僅inline block屬性是無法讓元素水平居中，他的關鍵之處...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...