css div居中顯示的4種寫法

2022-02-21 16:39:51 字數 2411 閱讀 9078

demo:

1.absolute 絕對定位 這是我們最常用的一種居中定位寫法 要求必須確定div的寬高度 目前市面上的瀏覽器基本上都支援這種寫法

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>absolute居中定位

title

>

<

style

>

*.absolutecenter

style

>

head

>

<

body

>

<

div

class

="absolutecenter"

>我是absolute居中定位

div>

body

>

html

>

2.translate定位 這是css3 transform的屬性 通過自身的偏移來定位 而且他有個極大的好處 不需要知道div的寬高度 就像js裡的this self一樣 可以將寬高度設為百分比 ie browser

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>translate居中定位

title

>

<

style

>

*.translatecenter

style

>

head

>

<

body

>

<

div

class

="translatecenter"

>我是translate居中定位

div>

body

>

html

>

3.margin居中定位  不需要確定div的寬高度 讓top,bottom,left,right都為0 再加個margin:auto 神來之筆 ie browser< ie 8不支援

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>margin居中定位

title

>

<

style

>

*.margincenter

style

>

head

>

<

body

>

<

div

class

="margincenter"

>我是margin居中定位

div>

body

>

html

>

4.fixed的居中定位 這個用的最多的可能就是導航條這塊兒 讓導航條居中顯示不隨頁面滾動

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>fixed居中定位

title

>

<

style

>

*.fixedcenter

style

>

head

>

<

body

>

<

div

class

="fixedcenter"

>我是fixed居中定位

div>

body

>

html

>

css div使網頁居中顯示

css div使網頁居中顯示 to center inline elements within a block element,use text align center 第三種方法,是通過left樣式,讓div左邊正好還正中。但我們需要的是div的中心在正中,那麼就再加乙個margin left的...

css居中的10種寫法(面試必考

github原文 部落格原文 css居中作為web前端中無可避免的話題,在面試中也是常常出現,可以說是面試必考。當然乙個沒什麼人氣的部落格只是寫給自己看的哈哈哈 不過說不定能被搜到呢 目錄 僅居中元素定寬高適用 居中元素不定寬高 123123 公共 wp box box.size 絕對定位的百分比是...

單例模式的4種寫法

餓漢式 執行緒安全的,但是會一直占用記憶體 public class singletoninstance private static final singletoninstance instance new singletoninstance public static singletoninst...