容器的居中顯示在網(wǎng)頁(yè)設(shè)計(jì)中是很常見(jiàn)的，居中顯示可以獲得視覺(jué)的焦點(diǎn)，是內(nèi)容更加突出，下面就簡(jiǎn)單的說(shuō)明一下如何在HTML中通過(guò)樣式的控制來(lái)實(shí)現(xiàn)

操作方法

• 01

  最常見(jiàn)的一種，代碼示例如下圖，首先，取big一半像素大小賦給small層，通過(guò)margin: 0 auto; text-align: center來(lái)實(shí)現(xiàn)

  
• 02

  第二種方法，代碼示例如下圖，將big層的display設(shè)置為table-cell,然后small層的margin-left?。?00-250）/2，也就是125即可

  
• 03

  第三種方法，代碼示例如下圖，將big層的position設(shè)置為absolute，然后small層的margin-left取（500-250）/2，也就是125即可

  
• 04

  第四種方法，通過(guò)display:flex實(shí)現(xiàn)，代碼示例如下圖，big層display:flex;flex-direction:column;而small層align-self:center

  
• 05

  第五種方法，在small層的寬度沒(méi)有的時(shí)候，可以通過(guò)width:fit-content這個(gè)設(shè)置來(lái)完成，代碼示例如下

  
• 06

  第六種方法，通過(guò)display:inline-block來(lái)實(shí)現(xiàn)，將這個(gè)設(shè)置賦給big層即可，代碼示例如下圖

  
• 07

  第七種方法，設(shè)置big層position:relative，相對(duì)情況下，使small層左浮動(dòng)，代碼示例如下

  
• 08

  第八種方法，transform屬性，代碼示例如下

  
• 09

  第九種方法，借助第三方樣式，比如增加一個(gè)add節(jié)點(diǎn)，水平浮動(dòng)向左，使small層隨之浮動(dòng)，代碼示例如下

  

特別提示

每種方法都適應(yīng)不同的運(yùn)行環(huán)境，實(shí)際操作時(shí)需要考慮不同瀏覽器的解析時(shí)的兼容性

聲明：本篇經(jīng)驗(yàn)系酷知網(wǎng)「www.coozhi.com」原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。