搜尋
首頁web前端css教學css如何設定頁面居中

css如何設定頁面居中

Sep 07, 2021 am 11:09 AM
css居中

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

css如何設定頁面居中

本教學操作環境: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

# 這種方法能十分簡單地這個間距問題,只需要將父親divfont-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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Draggin&#039;和droppin&#039;在反應中Draggin&#039;和droppin&#039;在反應中Apr 17, 2025 am 11:52 AM

React生態系統為我們提供了許多庫,所有庫都集中在拖放的相互作用上。我們有反應,反應,可愛dnd,

快速軟件快速軟件Apr 17, 2025 am 11:49 AM

最近有一些關於快速軟件的完美互連的事情。

帶有背景折疊的嵌套梯度帶有背景折疊的嵌套梯度Apr 17, 2025 am 11:47 AM

我可以說我經常使用背景折疊。 IT Wager IT幾乎從未在日常CSS工作中使用。但是在斯特凡·朱迪斯(Stefan Judis)的帖子中,我想起了它,

使用React Hooks使用requestAnimationFrame使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM

使用RequestAnimationFrame進行動畫化應該很容易,但是如果您還沒有徹底閱讀React的文檔,那麼您可能會遇到一些事情

需要滾動到頁面頂部嗎?需要滾動到頁面頂部嗎?Apr 17, 2025 am 11:45 AM

向用戶提供此鏈接的最簡單方法是針對元素上的ID的鏈接。如此...

最好的(GraphQl)API是您編寫的API最好的(GraphQl)API是您編寫的APIApr 17, 2025 am 11:36 AM

聽著,我不是GraphQL專家,但我確實喜歡與之合作。作為前端開發人員,它向我曝光數據的方式非常酷。它就像一個菜單

在保留邊框半徑的同時,擴展盒子的各種方法在保留邊框半徑的同時,擴展盒子的各種方法Apr 17, 2025 am 11:19 AM

我最近注意到Codepen的一個有趣的更改:在懸停在主頁上的筆時,有一個矩形,圓角在後面擴展。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中