CSS居中经验谈-用法实例详解

网上有关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>

小结:

使用上述方法水平居中，必须指定宽度

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>

小结:

利用绝对定位 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>

小结:

在低版本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>

小结:

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

小结:

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

小结:

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

小结:

(1)算是一个css hack，服务于IE6/7