CSS水平居中的9種方法
來源:酷知科普網 1.42W
容器的居中顯示在網頁設計中是很常見的,居中顯示可以獲得視覺的焦點,是內容更加突出,下面就簡單的說明一下如何在HTML中通過樣式的控制來實現
操作方法
最常見的一種,程式碼示例如下圖,首先,取big一半畫素大小賦給small層,通過margin: 0 auto; text-align: center來實現
第二種方法,程式碼示例如下圖,將big層的display設定為table-cell,然後small層的margin-left取(500-250)/2,也就是125即可
第三種方法,程式碼示例如下圖,將big層的position設定為absolute,然後small層的margin-left取(500-250)/2,也就是125即可
第四種方法,通過display:flex實現,程式碼示例如下圖,big層display:flex;flex-direction:column;而small層align-self:center
第五種方法,在small層的寬度沒有的時候,可以通過width:fit-content這個設定來完成,程式碼示例如下
第六種方法,通過display:inline-block來實現,將這個設定賦給big層即可,程式碼示例如下圖
第七種方法,設定big層position:relative,相對情況下,使small層左浮動,程式碼示例如下
第八種方法,transform屬性,程式碼示例如下
第九種方法,藉助第三方樣式,比如增加一個add節點,水平浮動向左,使small層隨之浮動,程式碼示例如下
特別提示
每種方法都適應不同的執行環境,實際操作時需要考慮不同瀏覽器的解析時的相容性