DIV样式居中

AnyBisks

2013-07-02

关注关注

我相信所有的前端菜鸟在刚开始工作的时候都会和我一样，收到实现居中的需求。

网上的CSS居中帖子不胜枚举，但大多都没有很好的总结（或者有好的但是我没运气碰到）

今天就自己写一个吧，也算是对之前工作的总结。

一、水平居中

1.将元素水平居中

div.h_align{
            border: 1px solid black;
            
            /*key code:*/
            margin-left: auto;
            margin-right: auto;
            width: 300px;/*必须指定宽度*/
        }

html code:

<div class="h_align">我是div！come on 求水平居中！</div>

summary:

(1)以上方法在无文档类型或文档类型是HTML4时，对IE无效，因为此时IE将此文档解析为HTML而不是XHTML或HTML5

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

2.将元素水平居中（use absolute position & width）

css code:

section{
            border: 1px solid red;
            
            /*key code:*/
            position: absolute;
            left: 50%;
            width: 300px;
            margin-left: -150px;
        }

html code:

<section>我是section！同求水平居中！</section>

summary:

(1)这个方法的思想是，利用绝对定位 left 50%以后，使负外边距的值为元素宽度的一半，从而实现居中（这个思路也可以用在垂直居中上）

二、垂直居中

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