關於html中css設置居中

一：水平居中 1：文本圖片等行內元素居中       對其父元素設置text-align：center 2：肯定寬度的行內元素水平居中      經過設置其margin-left：0 auto，margin-right：0 auto來實現 3：不肯定寬度的塊級元素居中   （1）通 過嵌套table標籤來實現對table設置margin：0 auto；<table><tr><td><ul><li>內容居 中</li></ul></td></tr></table>肯定是嵌套太深，對搜索引擎 不友好，雖然簡單易實現，可是筆者不推薦   （2）將ul塊級元 素經過display：inline來轉換成行內元素，而後使用text-align：center來實現居中，實現起來比起第一種沒有了標籤的嵌套，不 用增長無語意的標籤，可是缺點是將塊級元素轉換爲行內元素失去了塊級元素的不少好的特性，好比當要設定長寬值，在特定的css設置中會帶來一些限制   （3）設置父元素float，position：relative，left：50%；子元素設置position：relative，left：50%來實現居中，比上面兩張的缺點都沒有了，可是缺點就是設置了position：relative會帶來一些反作用。

二：豎直居中 1：父元素高度不肯定的文本，圖片塊級元素的豎直居中    經過設置父元素的margin-top和margin-buttom相同的上下邊距實現 2：父元素高度肯定的單行文本豎直居中    給父元素設置line-height值和父元素高度相同來實現 3：父元素高度肯定的多行文本，圖片，塊級元素的豎直居中   （1）嵌 套<td>或<th>標籤設置vertical-algin來實現，還能夠設置其它塊級元素div，p的 display：table-cell啦激活ertical-algin，可是在IE6,IE7中沒法激活，因此只有經過嵌套<td>或<th>標籤來實現，td標籤的默認vertical-algin值爲middle。   （2）對 第一種的改進，對於IE6,IE7不兼容display：table-cell，改進方法能夠用hack技術來實現，因爲要兩層嵌套div設置 top：-50%和top：50%來實現居中，還要設置position：relative，這種方法缺點是嵌套太深，還設置了hack不利於維護，還要 設置position：relative和position：absolute，帶來反作用，不推薦。