css如何設定頁面居中

css設定頁面居中的方法：1、「text-align:center」設定水平居中。 2、「dispaly:flex」設定水平居中。 3.「display:table-cell」設定垂直居中。 4、「position:absolute」設定垂直居中。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

假設現在給出這種場景：

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

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

一、水平居中

1.1text-align: center

在區塊級父容器中讓行內元素或類別行內元素居中，只要使用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之間的空隙就好了。

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

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

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 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影片教學## #######

以上是css如何設定頁面居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！