CSS水平居中的9種方法

容器的居中顯示在網頁設計中是很常見的，居中顯示可以獲得視覺的焦點，是內容更加突出，下面就簡單的說明一下如何在HTML中通過樣式的控制來實現

操作方式

01
最常見的一種，代碼示例如下圖，起首，取big一半像素巨細賦給small層，經由過程margin: 0 auto; text-align: center來實現
02
第二種方式，代碼示例如下圖，將big層的display設置為table-cell,然后small層的margin-left取（500-250）/2，也就是125即可
03
第三種方式，代碼示例如下圖，將big層的position設置為absolute，然后small層的margin-left取（500-250）/2，也就是125即可
04
第四種方式，經由過程display:flex實現，代碼示例如下圖，big層display:flex;flex-direction:column;而small層align-self:center
05
第五種方式，在small層的寬度沒有的時辰，可以經由過程width:fit-content這個設置來完當作，代碼示例如下
06
第六種方式，經由過程display:inline-block來實現，將這個設置賦給big層即可，代碼示例如下圖
07
第七種方式，設置big層position:relative，相對環境下，使small層左浮動，代碼示例如下
08
第八種方式，transform屬性，代碼示例如下
09
第九種方式，借助第三方樣式，好比增添一個add節點，程度浮動標的目的左，使small層隨之浮動，代碼示例如下
End