CSS水平居中的9種方法
- IT技術
- 關注:1.32W次
容器的居中顯示在網頁設計中是很常見的,居中顯示可以獲得視覺的焦點,是內容更加突出,下面就簡單的說明一下如何在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層隨之浮動,代碼示例如下
特別提示
每種方法都適應不同的執行環境,實際操作時需要考慮不同瀏覽器的解析時的相容性
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-hant/sm/itjishu/ee20z.html