1.常規方法 - 定寬元素
html部分：
css部分：
/*公用*/
body,div
.container
/*居中*/
.center
2.不定寬元素 - 設定行內塊
然而很多時候，我們並不知道需要居中元素的寬度，或者其寬度是隨後臺資料變化的。
下文開始，我們以「分頁效果」為例，詮釋「不固定寬度」的元素如何設定水平居中：
html部分（外層div.container略）：
<12
345>
css部分（前文公用部分略）：
/*分頁公用*/
lili:hover
/*設定行內塊*/
.pages
.pages li
3.不定寬元素 - 設定浮動
用浮動的辦法，即可避開瀏覽器帶來的inline-block預設間距
思路：
1.外層相對定位，內層相對定位2.外層左浮動，內層左浮動
3.外層右移50%，內層左移50%
html部分不變，為避免重複class改為pages2，後文同理
css部分：
.pages2
.pages2 li
.pages2 li:not(:first-child)
4.不定寬元素 - 絕對定位
思路：
1.外層絕對定位，內層相對定位，外層的外層相對定位2.外層左浮動，內層左浮動
3.外層右移50%，內層左移50%
css部分：
.container
.pages3
.pages3 li
.pages3 li:not(:first-child)
5.css新特性 - fit-content
css3新特性
width: fit-content，只
需配合margin: auto，即可巧妙將元素水平居中
（fit-content目前僅支援谷歌和火狐瀏覽器，但非常適合移動端開發！）
.pages4
.pages4 li
.pages4 li:not(:first-child)
CSS實現元素水平居中
元素主要分為塊級元素和行內元素，所以對元素進行水平居中也分這兩種情況來討論，另外塊級元素的實現比較複雜，將分情況討論。常用行內元素為a img input span等，標籤內的html文字也屬於此類。對於此類情況，水平居中是通過給父元素設定text align center來實現的。html結構 h...
CSS實現水平居中的5種思路
將子元素的display設定為inline block，使子元素變成行內元素 div class parent style background color gray div class child style background color lightblue demo div div 這種方法...
css實現元素水平垂直居中
利用負邊距實現子元素居中 相對于父元素 position relative 需已知子元素的width與height 且把子元素的position設為absolute，絕對定位 以及設定left和top為50 再加上負邊距，margin left值為width的一半，同樣的，margin top值為h...