今天小编跟大家讲解下有关元素及文本的居中(层的横向居中/层的垂直居中/绝对居中) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关元素及文本的居中(层的横向居中/层的垂直居中/绝对居中) 的相关资料，希望小伙伴们看了有所帮助。
一.层的横向居中 复制代码代码如下: <style> #div1{width:600px; height:600px;} #div2{width: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; } #div2{ margin:auto; display:block; *display:inline; *zoom:1; } 二.层的垂直居中 1.最常见的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle; css 中的 vertical-align:middle;与表格的 vertical-align 不太一样 该样式作用于 inline-block(或具有类似行内块状效果) 的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block 元素没有设置 vertical- align 样式）在垂直方向的对齐方式。 vertical-align 无法影响后代元素的内容的对齐方式。 vertical-align 对 block 元素不起作用 因为折行了在垂直方向没有对齐可言。 vertical-align 作用于 inline元素(如 span)时 将决定该元素自身如何对齐于同一行内的 inline-block 元素 无法影响同辈元素或文本的对齐方式。 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 的顶端和底端作为对齐的基准）。 具体的解释参考这里： https:///css/70053.html一个例子 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; width: 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; width: 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; border:1px solid green; } </style> <div class="div_1"> <div class="content"> Content here </div> </div> 2、利用绝对定位 0 偏移 和 margin:auto; 两侧偏移都被设置为0时 margin:auto 将使内容居中 该方法对所有元素生效 该方法不兼容低于 IE8 的浏览器 复制代码代码如下: <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% 偏移 和负值偏移 支持所有浏览器 复制代码代码如下: <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> 不使用 table 和 不计算尺寸而且兼容 IE6 的垂直居中方法我没发现 有知道的同学望赐教。 四.文本挣开div的问题 默认情况下如果没有设置块状元素的高宽 块级元素宽度取最大值 高度取最小值。 IE6下 div内的内容(文本和元素)可以撑开 div 的高宽(定义了高宽的值) IE7以上版本和firefox都不存在这个问题 IE7以上版本支持 min-height max-height min-width max-width 因此在IE7 或 firefox 等较新的浏览器是用 min-height min-width 可以达到IE6下自动撑大元素的效果。来源：爱蒂网
