為你總結老生常談的 — CSS置中

我相信所有的前端菜鳥在剛開始工作的時候都會和我一樣，收到實現置中的需求。

網上的CSS置中文章不勝枚舉，但大多都沒有很好的總結（或者有好的但是我沒運氣碰到）

今天就自己寫一個吧，也算是對之前工作的總結。

 

一、水平置中1.將元素水平置中（use margin & width property）

css code:

        div.h_align{            border: 1px solid black;            margin: 0 auto;            width: 50%;/*必須指定寬度,可為百分比或像素值*/        }

html code:

<div class="h_align">我用margin:0 auto!come on 求水平置中！</div>

summary:

　　使用上述方法水平置中，必須指定寬度

compatibility:

　　Firefox\Chrome\Safari\Opera\IE 9 8 7 6

 

2.將元素水平置中（use absolute position & width）

css code:

        div.pos{            border: 1px solid red;            position: absolute;            left: 50%;            width: 300px;            margin-left: -150px;        }

html code:

<div class="pos">我用絕對位置！同求水平置中！</div>

summary:

　　這個方法的思想是，利用絕對位置 left 50%以後，使負外邊距的值為元素寬度的一半，從而實現置中（這個思路也可以用在垂直置中上）

compatibility:

　　Firefox\Chrome\Safari\Opera\IE 9

　　IE 8及以下均不相容,等我以後寫個解析

 

3.將元素水平置中（IE 6\7 solution）

css code:

        div.textAlign{            margin-top:100px;            text-align: center;        }        div.textAlign div{            text-align: left;            width:500px;            background-color:green;        }

html code:

    <div class="textAlign"><!--text-align:center IE7 6-->        <div>來來來來來來來~~~ text-align :center!只能把我用在IE6 7！</div>    </div>

summary:

　　在低版本IE中，text-align不僅用於文本，也用於元素本身的位置位移，因此在IE6 7中使用text-align會使子項目也隨著文本一併置中，此時只要在子項目中應用一次text-align:left就可以實現元素水平置中

compatibility:

　　IE 7\6

 

二、垂直置中1.單行文本垂直置中

css code:

        p.single_line{            border: 1px solid green;            /*key code:*/            height: 4em;            line-height: 4em;            overflow: hidden;        } 

 html code:

<p class="single_line">我是單行文本！我有100px高，我要垂直置中！</p>

 summary:

　　(1)key:令行距和元素高度相同，這樣就限定了容器內只能容納一行常值內容，於是文本就置中了

　　(2)設定height和line-height時，推薦使用相對單位em，這樣能夠在字型非常大的時候，依然保持置中

　　(3)overflow:hidden是必須的，理由同上，也是為了保持置中

　　(4)優點：塊元素和行內元素均適用此方法，並且在主流瀏覽器中適用

　　(5)缺點：文本長度有限（最多隻能一行），且對於非文本的元素無效

 

2.無固定高度的多行文本垂直置中

css code:

        p.multi_line{            border: 1px solid gray;            width: 100px;            /*key code:*/            padding-top: 30px;            padding-bottom: 30px;        }

 html code:

<p class="multi_line">我是多行文本！我寬100px但是沒有固定高度！跪求垂直置中！</p>

 summary:

　　(1)key:令上內邊距和下內邊距相等。值是多少無所謂，相等即可，使用上下外邊距相等也可

　　(2)優點：塊元素和行內元素均適用此方法，非文本元素也可以使用，並且在主流瀏覽器中適用

　　(3)缺點：無法設定高度

 

3.將固定高度的容器類比表格版面配置實現垂直置中

css code:

        div.wrap1{            border: 1px solid black;            /*key code:*/            display:table;            height:300px;        }        div.wrap2{            /*key code:*/            display:table-row;        }        div.wrap3{            /*key code:*/            display:table-cell;            vertical-align:middle;        }        div.maincontent{            width:350px;            background-color:black;            color: white;            /*key code:*/            height:90px;/* less than wrap1.height */                    }

 html code:

    <div class="wrap1">        <div class="wrap2">            <div class="wrap3">                <div class="maincontent">我老爸高300px，我自己是350 X 90 px，我也可以置中啦哇哈哈，可是別在IE6/7下看我噢</div>                <!-- other content -->            </div>        </div>     </div>

 summary:

　　(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{            border: 1px solid pink;            /*key code:*/            height: 300px;            position: relative;        }        div.IE7wrap2{            /*key code:*/            position: absolute;            top: 50%;            left: 0;        }        div.IE7maincontent{            width:350px;            background-color:black;            color: white;            height: 90px;            /*key code:*/            position: relative;            top:-50%;            left: 0;        }

 html code:

    <div class="IE7wrap1">        <div class="IE7wrap2">            <div class="IE7maincontent">嘿哥們，我是IE6/7的解決方案，要看我就要用IE6/7，不然我醜爆了</div>        </div>    </div>

 summary:

　　(1)算是一個css hack，服務於IE6/7

 

三、總結

　　工作時積累下來的經驗，以及摘抄網上的資料，總結成這一篇博文，如果對您有協助，請您推薦。

　　共勉。