這篇文章主要講解了“css如何設(shè)置頁面居中”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css如何設(shè)置頁面居中”吧！

創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為平塘企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、做網(wǎng)站，平塘網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

居中在CSS中用的也比較常見，總結(jié)幾種自己比較熟悉的居中的寫法。當(dāng)然，肯定還有更多更不錯的寫法，對于文中不足的地方也歡迎指正。

假設(shè)現(xiàn)在給出這種場景：

  
    DEMO
  

其中在class='child'這個div中的內(nèi)容長度是不一定的，現(xiàn)在需要實現(xiàn)這個div的居中。

一、水平居中

1.1text-align: center

在塊級父容器中讓行內(nèi)元素或者類行內(nèi)元素居中，只需使用text-align: center，
這種方法可以讓inline/inline-block/inline-table/inline/flex居中。

.child {
  display:inline-block;
  /*子元素文字會繼承居中，因此要在上面寫上向左邊居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

當(dāng)有多個child div的時候如果設(shè)置display: inline-block的時候需要注意每個div之間會有縫隙，這不是什么bug，特性就是如此。

如果想去掉這些縫隙的話，有幾種解決方法：

1、去掉HTML中的空格。

元素之間留白間距出現(xiàn)的原因是因為標(biāo)簽段之間的空隙，這個時候只需要去除掉HTML之間的空隙就好了。

比如這種寫法，當(dāng)然寫法也有很多種，只要保證把空隙去掉就可以了，但是這種方法總覺得寫起來有點反人類。

  
  DEMO1

  DEMO2

  DEMO3

2、使用margin負(fù)值

這種方法這個負(fù)的值不太好確定，和上下文的字體等等都有關(guān)，這種方法不太適合大規(guī)模的使用。

.child {
  margin-right; -5px;
}

3、使用 font-size: 0

這種方法能十分簡單地這個間距問題，只需要將父div的font-size設(shè)為0 ，然后記得將子div的font-size屬性設(shè)置回來即可。

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

4、使用letter-spacing或者word-spacing

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

1.2 dispaly: flex

只兼容IE10+

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

二、垂直居中

1.1display: table-cell

可以使高度不同的元素都垂直居中

.parent {
  display:table-cell;
  vertical-align:middle;
}

2.2 position: absolute

.parent {
  position:relative;
}
.child{
  position:absolute;
  top:50%;   /* 參照物是父容器 */
  transform:translateY(-50%); /*百分比的參照物是自身 */

感謝各位的閱讀，以上就是“css如何設(shè)置頁面居中”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css如何設(shè)置頁面居中這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！