這篇文章主要介紹了實現(xiàn)CSS居中的方法有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)臨縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

<div class="parent">
  <div class="child">
    DEMO
  </div>
</div>

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

水平居中

1.1 display: inline-block

在塊級父容器中讓行內(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)然寫法也有很多種，只要保證把空隙去掉就可以了，但是這種方法總覺得寫起來有點反人類。

<div class="parent">
  <div class="child">
  DEMO1</div
  ><div class="child">
  DEMO2</div
  ><div class="child">
  DEMO3</div>
</div>

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 display:table

table 元素的寬度也是跟著內(nèi)容走，居中的時候加上 margin 即可。兼容IE8。

如果不設(shè)置成table,設(shè)置成別的塊級元素也可以，但是要強(qiáng)調(diào)設(shè)置寬度width，不然會拉伸成父元素的寬度。(注意加上 width 這種方法拓展性不好，如果 child div 里面的內(nèi)容很長的話可能超過設(shè)置的 width 的寬度)

.child {
  display:table;
  margin:0 auto;
}

1.3 position: absolute

absolute 元素的寬度默認(rèn)也是由內(nèi)容決定

這種方法的優(yōu)點是居中的元素不會對其他元素產(chǎn)生影響 脫離正常流

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

1.4 dispaly: flex

只兼容IE10+

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

2.垂直居中

2.1 display: table-cell

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

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

2.2 position: absolute

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

2.3 display: flex

只兼容IE10+

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

3.水平垂直居中

這種就只需要把前幾種的結(jié)合起來就行了，主要有三種常見的方法。

3.1 inline-block + table-cell

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

3.2 absolute + transform

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

3.3 flex + align-items + justify-content

.parent {
  display:flex;
  justify-content:center;
  align-items:center;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“實現(xiàn)CSS居中的方法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

名稱欄目：實現(xiàn)CSS居中的方法有哪些
分享鏈接：http://chinadenli.net/article30/pggpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站策劃、全網(wǎng)營銷推廣、建站公司、微信小程序、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)