CSS網頁製做:讓網頁內容居中的方法與技巧

導讀：網頁製做Webjx文章簡介：居中一直是設計師們比較喜歡使用的一種擺放形式，不管是圖片仍是文字都會被要求放在中間，水平或者垂直。css提供了不少方便的讓內容居中的方法給咱們使用，如下羅列那些最長被使用的居中技巧。

居中一直是設計師們比較喜歡使用的一種擺放形式，不管是圖片仍是文字都會被要求放在中間，水平或者垂直。css提供了不少方便的讓內容居中的方法給咱們使用，如下羅列那些最長被使用的居中技巧。

水平居中的text-align:center 和 margin:0 auto

這兩種方法都是用來水平居中的，前者是針對父元素進行設置然後者則是對子元素。他們起做用的首要條件是子元素必須沒有被float影響，不然一切都是無用功。margin:0 auto也能夠被寫成margin:0 auto 0 auto。不能理解的童鞋們能夠本身去找找關於css縮寫的內容。

垂直居中的line-height

什麼？！margin在垂直居中裏不起做用了？顯然事情確實如此，咱們僅有margin:0 auto的用法而沒有auto 0的狀況。至於line-height，他也是做用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中了。此處好像僅僅只能是文字而已，遺憾。

萬能的position大法

這個方法能夠說真的是萬能的。當你爲一個元素沒法居中而困擾的時候，能夠果斷的使用他，並且幾乎沒有後遺症，絕對是前端工程師們居家旅行必備的手段之一。

具體的作法很簡單，首先給父元素寫上positon:relative，這麼作是爲了給子元素打上position:absolute的時候不會被定位到外太空去。接下去，寫上子元素的height和width，這個彷佛是必須的，某些瀏覽器在解析的時候若是沒有這2個值的話會出現意想不到的錯位。接着就是整個方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負數;margin- left:一半的weight值的負數。整理一下以後，可能你會給你的子元素寫上這樣的css（固然，父元素也要先寫上width和height）

{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}

接下去就刷新頁面吧，你的子元素已是居中顯示了。

使用這個方法的好處在於不管你是什麼形式的內容均可以立刻居中，而缺點就是必須對元素有肯定的寬高值，不然的話可能就須要經過javascript來進行一些小計算了。