容器的居中顯示在網(wǎng)頁設(shè)計中是很常見的 ， 居中顯示可以獲得視覺的焦點，是內(nèi)容更加突出，下面就簡單的說明一下如何在HTML中通過樣式的控制來實現(xiàn)
操作方法01、最常見的一種，代碼示例如下圖，首先，取big一半像素大小賦給small層，通過margin: 0 auto; text-align: center來實現(xiàn)
02、第二種方法，代碼示例如下圖，將big層的display設(shè)置為table-cell,然后small層的margin-left?。?00-250）/2，也就是125即可
03、第三種方法，代碼示例如下圖，將big層的position設(shè)置為absolute，然后small層的margin-left?。?00-250）/2，也就是125即可
04、第四種方法，通過display:flex實現(xiàn) ， 代碼示例如下圖，big層display:flex;flex-direction:column;而small層align-self:center
05、第五種方法，在small層的寬度沒有的時候，可以通過width:fit-content這個設(shè)置來完成 ， 代碼示例如下
06、第六種方法，通過display:inline-block來實現(xiàn)，將這個設(shè)置賦給big層即可，代碼示例如下圖
07、第七種方法，設(shè)置big層position:relative ， 相對情況下，使small層左浮動，代碼示例如下
08、第八種方法 ， transform屬性，代碼示例如下
09、第九種方法，借助第三方樣式，比如增加一個add節(jié)點，水平浮動向左，使small層隨之浮動 ， 代碼示例如下
特別提示【CSS水平居中的9種方法】每種方法都適應(yīng)不同的運行環(huán)境，實際操作時需要考慮不同瀏覽器的解析時的兼容性
推薦閱讀
- css透明度，css圖片透明度設(shè)置方法
- ps中如何將圖形居中或?qū)R
- css3如何實現(xiàn)邊框陰影
- html怎么才可以讓圖片居中
- HTML中引入css和js的方法
- 長春新區(qū)北湖春天B區(qū)是哪個居委會
- 縉云新居入住5年可以買嗎
- Pr如何水平翻轉(zhuǎn)視頻
- HTML樣式CSS的三種寫法
- 江蘇提高城鄉(xiāng)居民基本醫(yī)?；I資標準：不低于每人每年1050元