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...