**的一篇文章，講解css內容居中的。
網上有關css 居中的文章不勝列舉，不過大多沒有做系統的總結。
這裡分享的這篇有關css居中的文章，個人感覺不錯，值得收藏。
一、水平居中
1，將元素水平居中（use margin & width property）
css code:
div.h_align
html code:
我用margin:0 auto!come on 求水平居中！
小結:使用上述方法水平居中，必須指定寬度
compatibility:
firefox\chrome\safari\opera\ie 9 8 7 6
2.將元素水平居中（use absolute position & width）
css code:
div.pos
html code:
我用絕對定位！同求水平居中！
小結:利用絕對定位 left 50%以後，使負外邊距的值為元素寬度的一半，從而實現居中（這個思路也可以用在垂直居中上）
compatibility:
firefox\chrome\safari\opera\ie 9
ie 8及以下均不相容,等我以後寫個解析
3.將元素水平居中（ie 6\7 solution）
css code:
div.textalign
div.textalign div
html code:
來來來來來來來~~~ text-align :center!只能把我用在ie6 7！
小結:在低版本ie中，text-align不僅用於文字，也用於元素本身的位置偏移，因此在ie6 7中使用text-align會使子元素也隨著文字一併居中，此時只要在子元素中應用一次text-align:left就可以實現元素水平居中
compatibility:
ie 7\6
二、垂直居中
1.單行文字垂直居中
css code:
p.single_line
html code:
我是單行文字！我有100px高，我要垂直居中！
小結:(1)key:令行距和元素高度相同，這樣就限定了容器內只能容納一行文字內容，於是文字就居中了
(2)設定height和line-height時，推薦使用相對單位em，這樣能夠在字型非常大的時候，依然保持居中
(3)overflow:hidden是必須的，理由同上，也是為了保持居中
(4)優點：塊元素和行內元素均適用此方法，並且在主流瀏覽器中適用
(5)缺點：文字長度有限（最多只能一行），且對於非文字的元素無效
2.無固定高度的多行文字垂直居中
css code:
p.multi_line
html code:
我是多行文字！我寬100px但是沒有固定高度！跪求垂直居中！
小結:(1)key:使用display屬性中的table、table-row、table-cell來將元素模擬成**布局。處於wrap3中的所有元素都會垂直居中，但是它們的高度總和不能超過wrap1的高度
(2)使用display:table-cell的時候必須同時在祖先元素使用display:table
(3)缺點：不能在ie6/7下實現
4.ie7及以下的解決辦法
css code:
div.ie7wrap1
div.ie7wrap2
div.ie7maincontent
html code:
嘿哥們，我是ie6/7的解決方案，要看我就要用ie6/7，不然我醜爆了
小結:(1)算是乙個css hack，服務於ie6/7
CSS實現垂直居中水平居中
1 絕對定位居中 子元素需設定寬高 內容塊的父容器 position relative 子元素 必須設定高度 position absolute top 0 left 0 bottom 0 right 0 margin auto 2 絕對定位配合margin 子元素需設定寬高 第一種 第二種 3 t...
各種居中的css實現
文字的水平居中text align center 文字的垂直居中設定行高即可line height 20px vertival align是相對兄弟的行高來定位，所有加乙個空的兄弟使得高度等於父盒子 box img block div text align用於設定盒子的內容水平居中 文字屬性，子盒子...
CSS居中的幾種實現
div 太簡單了，記錄一下就行 這個居中方式只針對子元素為diplay inline的元素或文字元素，如果子元素為inline block或者block，會出現子元素的文字內容居中了而子元素這個盒子還處在原位置的情況。line heigh只對父盒子為block或者inline block的且元素內有...