這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)csss實(shí)現(xiàn)水平居中的方法，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括萬載網(wǎng)站建設(shè)、萬載網(wǎng)站制作、萬載網(wǎng)頁制作以及萬載網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，萬載網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到萬載省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

（1）行內(nèi)元素（文字、圖片、行內(nèi)標(biāo)簽（span）、行內(nèi)塊標(biāo)簽（display：inline-block））：text-align: center，下面以span為例：

  
  hello 

.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  text-align: center;}

優(yōu)點(diǎn)：兼容性好，簡(jiǎn)單

缺點(diǎn)：text-align具有繼承性，會(huì)影響后代元素

（2）塊級(jí)元素：margin：0 auto

.son {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;}

優(yōu)點(diǎn)：簡(jiǎn)單，兼容性好

缺點(diǎn)：寬度必須已知且小于父級(jí)元素

（3）flex實(shí)現(xiàn)，設(shè)置主軸方向居中

.father {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: center;}.son {
  width: 100px;
  background-color: turquoise;}

如果是多個(gè)元素可以設(shè)置為：

justify-content: space-around; /* 子元素左右兩邊距離均勻分布 */或justify-content: space-between; /* 最左邊和最右邊元素靠緊父元素，其余均勻 */

優(yōu)點(diǎn)：方便，可以實(shí)現(xiàn)自適應(yīng)

缺點(diǎn)：兼容性稍微差一點(diǎn)，PC端IE10以上支持

（4）絕對(duì)定位實(shí)現(xiàn)：子絕父相

 .father {
   width: 500px;
   height: 100px;
   border: 1px solid red;
   position: relative;
 }

 .son {
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: red;
   left: 50%;
   transform: translate(-50%);/* margin-left: -50% */
 }

優(yōu)點(diǎn)：優(yōu)點(diǎn)很少，對(duì)于較難實(shí)現(xiàn)居中的元素可以用定位，margin-left兼容性好點(diǎn)

缺點(diǎn)：脫離文檔流，代碼多，兼容性稍微差點(diǎn)，IE9以上支持transform，而且需要知道寬度值。

上述就是小編為大家分享的csss實(shí)現(xiàn)水平居中的方法了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。