CSS水平居中和垂直居中實現方法?

CSS水平居中和垂直居中實現方法?派大星57882020-07-16 18:49:51

方法一:使用margin: 0 auto;(只適用於子盒子有寬的時候)

方法二:text-align + display(子盒子有或沒有寬度的時候都適用)

方法三:position 定位(只適用於子盒子有寬度和高度的時候)

方法四:position + transform(子盒子有或沒有寬高的時候都適用)

方法五:flex 佈局(彈性佈局)(子盒子有或沒有寬高的時候都適用)

CSS水平居中和垂直居中實現方法?

擴充套件內容

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行畫素級精確控制,支援幾乎所有的字型字號樣式,擁有對網頁物件和模型樣式編輯的能力。

CSS是一種定義樣式結構如字型、顏色、位置等的語言,被用於描述網頁上的資訊格式化和顯示的方式。CSS樣式可以直接儲存於HTML網頁或者單獨的樣式單檔案。無論哪一種方式,樣式單包含將樣式應用到指定型別的元素的規則。外部使用時,樣式單規則被放置在一個帶有副檔名_css的外部樣式單文件中。

樣式規則是可應用於網頁中元素,如文字段落或連結的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中,外部樣式單儲存在獨立的文件中,網頁透過一個特殊標籤連結外部樣式單。

名稱CSS中的“層疊(cascading)”表示樣式單規則應用於HTML文件元素的方式。具體地說,CSS樣式單中的樣式形成一個層次結構,更具體的樣式覆蓋通用樣式。樣式規則的優先順序由CSS根據這個層次結構決定,從而實現級聯效果。