實現CSS居中的方法有哪些

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

假設現在給出這種場景：

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

其中在 class='child' 這個 div 中的內容長度是不一定的，現在需要實現這個 div 的居中。

水平居中

1.1 display: inline-block

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

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

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

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

1.去掉 HTML 中的空格。

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

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

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

2.使用 margin 負值

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

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

3.使用 font-size: 0

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

.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 元素的寬度也是跟著內容走，居中的時候加上 margin 即可。兼容IE8。

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

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

1.3 position: absolute

absolute 元素的寬度默認也是由內容決定

這種方法的優點是居中的元素不會對其他元素產生影響 脫離正常流

.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.水平垂直居中

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

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;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“實現CSS居中的方法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!