元素及文本的居中

一.层的横向居中

<style>

#div1{600px; height:600px;}

#div2{400px; height:200px;}

</style>

<div id="div1"> 
<div id="div_2"> div2 </div> 
</div>

要让div2在div1中横向居中，解决办法如下：

1.IE中，设置div1的样式：text-align:center; 该方法在IE8以上版本和firefox中仅适用于行内元素居中（display:inline; 和 display:inline-block; 及类似效果的元素以及文本，如 input img 等 ），子元素中的 div、table 等 具有类似 display:block 效果元素将继承这个样式使文本居中 ,但是容器元素本身并不会居中。

2.IE7 以 上和 firefox 中，设置div2样式：margin: auto;  仅对具有类似 display:block 效果的元素生效，对 display 为 inline、inline-block 的元素不生效，一般用于 div、table 等位置定位的容器元素， margin 样 式 auto 效果是横向居中，并置顶。

3. div2 不能是 position:absolute; 绝对定位将使浏览器无法对元素自动排版，需依赖 left、right 属性，除非明确设定 left:0,right:0;

综合以上：

 #div1{
*text-align:center;   /* ie */
}

#div2{
margin:auto;
display:block;

*display:inline; /* ie */
*zoom:1; /* ie */

}

二.层的垂直居中

1.最常见的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle;

css 中的 vertical-align:middle;与表格的 vertical-align 不太一样， table 的  vertical-align:middle; 使单元格内的内容在单元格中垂直方向居中。

css 中的 vertical-align:middle; 的作用实际是使同一行内相邻的内容垂直对齐，跟相对于容器元素的布局没有关系，因此这里说的实际是“垂直对齐” 而非垂直居中。

css 中的 vertical-align:middle; 样式作用于 inline-block(或 具有类似行内块状效果) 的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block 元素没有设置 vertical- align 样式）在垂直方向的对齐方式。

vertical-align 无法影响后代元素的内容的对齐方式。

vertical-align 对 block  元素不起作用，因为折行了在垂直方向没有对齐可言。
vertical-align 作用于 inline元素(如 span)时，将决定该元素自身如何对齐于同一行内的 inline-block 元素，无法影响同辈元素或文本的对齐方式，这种表现是因为 vertical-align 影响了改行的 line-box 布局， span 随 line-box 改变。
vertical-align 取 值为 text-top text-bottom 时， 对齐方式涉及文本的 inline-box 模型，

inline-box 模型的高度 由 line-height(可以是继承来的) 决定，分为 content-area、top、bottom几个部分，其中的 content- area 是由文字大小决定，如果过 line-height 很大， font-size 较小，加上背景颜色，我们就看到的背景色区域就 是 content-area，
text-top 和 text-bottom 并不是可见的文字的顶端和底端（IE6-8 在渲染 text- top 和text-bottom时， 错误地将content-area 的顶端和底端作为对齐的基准）。

具体的解释参考这里：

http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/

一个例子，firefo、chrome 与IE 有差别：

<div style="line-height:200px; border:1px solid #34538b;">
    <span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>

 

##================== test ==================

document.body.innerHTML = '<div id="conatiner" style="border: 1px solid red;  500px; height: 300px; text-align: left;">aaaaaaaaa<div style="border:1px solid blue;display:inline-block; vertical-align: bottom;"><div style="border: 1px solid green;  300px; height: 200px;  text-align: center; display: inline-block;display: inline-block;display: inline-block;display: inline-block;*display:inline;*zoom:1;margin:auto;display: inline-block;">12313123123<input type="button" style="margin:auto;display:inline-block;height: 40px;" value="click"><span style="background:#aaeeff;height: 40px;">hello world</span></div>8888</div>bbbbbbbbbb</div>';

##====================================

2.如果不想用table元素实现垂直居中，在IE8以上版本和firefox中，display: table-cell; 可以让div以表格单元格的方式显示，设置样式为

#div2{display: table-cell; vertical-align: middle; } ，但IE6中不支持display: table-cell;

3、如果是单行文本，为了兼容IE6，可以使设置行高与div的高度一致 #div2{heigh:100px;line-height:100px;}

4、对于多行文本，如果包含文本的div高度不固定，为了兼容IE6可以使设置top和bottom的padding为相同的固定值，div随文本内容增加而自动改变高度  #div2{height:auto; padding:10px 0px;}

 5、同样，需要剧中的元素如果 position:absolute; 需要明确设置 top、bottom 为0 才能使浏览器对其实现自动排版，因此使用 vertical-align 排版的元素最好不要设置 position:absolute

三.绝对居中

1、利用百分比偏移和margin负值，该方法对所有元素生效，该方法兼容所有浏览器

<style>

.div_1{
    position:relative;
    border: solid 1px red;     
    width:200px;
    height:200px;    
    background-color:silver;    
}
.content {
 position:absolute;
 top:50%;
 left:50%;   
 width:50px;
 height:50px;
 margin-top:-25px;
 margin-left:-25px;

/*或者  margin:50%; top:-25px; left:-25px; */

border:1px solid green;
}

</style>

<div class="div_1">
    <div class="content">
        Content here
    </div>
</div>

2、利用绝对定位 0 偏移 和  margin:auto;  两侧偏移都被设置为0时，margin:auto 将使内容居中，该方法对所有元素生效，该方法不兼容低于 IE8 的浏览器,但 横向居中 with不能为 auto，可以为0，垂直居中 height 不能为 auto，可以为0 ， 这在使用 border 构建元素时需要注意 。

<style>

.div_1{
    position:relative;
    border: solid 1px red;     
    width:200px;
    height:200px;    
    background-color:silver;    
}

.content {
 position:absolute;

 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;
 height:50px;
 width:70%;
 border:1px solid green;
}

</style>

<div class="div_1">
    <div class="content">
        Content here
    </div>
</div>

 

3、利用 50% 偏移 和负值偏移，支持所有浏览器, 偏移设置需要考虑居中内容的尺寸 （例如下面的 200px ）

<style>

.outer{
    position:relative;
    border:1px solid red;    
    width:400px;
    height:300px;
}

.cellOuter{
    position:absolute;
    top:50%;
    left:50%;    
    width:200px;
    height:200px;
    border:0px none;
    background:transparent;
}

.cellInner{
    position:absolute;

    top:-50%;

    left:-50%;  

    width:100%;
    height:100%;
    border:1px solid gray;   

}

</style>

<div class="outer">
    <div class="cellOuter">
        <div class="cellInner">hello cell</div>
    </div>
</div>

4、IE 6 、7 下 top 、left 使用 50% 偏移， 有个缺点， IE 7 下，居中元素的 width 会不生效
跟标准 CSS 不同的是， 在 IE 6、7 中，如果子元素 position:relative; 在设置 top left  时使用没百分比，但是其父元素的  height width 没有设定，则父元素由 子元素撑开，因此其 top left 的 50% 偏移正好是自身尺寸的 50% .

<div style="background:red;500px;height:500px;position:relative;">
   <div style="position:absolute;top:50%;left:50%;background:yellow;">
        <div style="background:green;position:relative; top:-50%; left:-50%;100px;height:100px;border:2px solid black;" >
                  my width ?
           </div>
   </div>
</div>

 不过 可以多嵌套一层 div 解决问题 （ie 6 7 only）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .container{
            background:red;
            width:500px;
            height:300px;
            position:relative;
        }

        .holder{
            position:absolute;
            top:50%;
            left:50%;
            background:yellow;
        }

        .content-warp{
            background:green;
            position:relative; 
            top:-50%; 
            left:-50%;
        
            border:2px solid black;
        }
        .content{
            position: relative;
        }
    </style>
</head>
<body>
<div class="container">
   <div class="holder">
        <div class="content-warp" >            
            <div class="content">
                hello<br/>
                hello<br/>
                hello<br/>
                hello world<br/>
                hello<br/>
                hello<br/>
            </div>
        </div>
   </div>
</div>
</body>
</html>

 5、使用同一行的行内块级元素垂直居中对齐的排版特性，其中一个行内块级元素宽度为0，高度100%。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
             600px;
            height: 500px;
            text-align: center;
            background: red;
        }

        .box span {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .box div {
            background: green;
            vertical-align: middle;
            display: inline-block;
	    300px;
	    height:200px;
        }
    </style>


<div class="box">
    <div></div>
    <span></span>
</div>

　　

 四.文本挣开div的问题

 默认情况下如果没有设置块状元素的高宽，块级元素宽度取最大值，高度取最小值。
IE6下，div内的内容(文本和元素)可以撑开 div 的高宽(定义了高宽的值)，IE7以上版本和firefox都不存在这个问题
IE7以上版本支持 min-height max-height  ，min-width max-width，因此在IE7 或 firefox 等较新的浏览器是用 min-height min-width 可以达到IE6下自动撑大元素的效果。