容器的居中顯示在網頁設計中是很常見的，居中顯示可以獲得視覺的焦點，是內容更加突出，下面就簡單的說明一下如何在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層隨之浮動，代碼示例如下 特別提示 每種方法都適應不同的運行環境，實際操作時需要考慮不同瀏覽器的解析時的兼容性

總結

以上是生活随笔為你收集整理的CSS水平居中的9种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。