元素及文本的水平居中/垂直居中/绝对居中总结
发布时间：2013-01-07 09:25:11 作者：佚名 
我要评论
我要评论简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
一.层的横向居中
<style>
#div1{width:600px;height:600px;}
#div2{width:400px;height:200px;}
</style>
<divid="div1">
<divid="div_2">div2</div>
</div>
要让div2在div1中横向居中，解决办法如下：
1.IE中，设置div1的样式：text-align:center;该方法在IE8以上版本和firefox中仅适用于行内元素居中（display:inline;和display:inline-block;及类似效果的元素以及文本，如inputimg等），子元素中的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不太一样，该样式作用于inline-block(或具有类似行内块状效果)的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block元素没有设置vertical-align样式）在垂直方向的对齐方式。
vertical-align无法影响后代元素的内容的对齐方式。
vertical-align对block元素不起作用，因为折行了在垂直方向没有对齐可言。
vertical-align作用于inline元素(如span)时，将决定该元素自身如何对齐于同一行内的inline-block元素，无法影响同辈元素或文本的对齐方式。
vertical-align取值为text-toptext-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://www.jb51.net/css/70053.html
一个例子，firefo、chrome与IE有差别：
<divstyle="line-height:200px;border:1pxsolid#34538b;">
<spanstyle="font-size:60px;border:1pxsolid#a0b3d6;vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>
##==================test==================
document.body.innerHTML='<divid="conatiner"style="border:1pxsolidred;width:500px;height:300px;text-align:left;">aaaaaaaaa<divstyle="border:1pxsolidblue;display:inline-block;vertical-align:bottom;"><divstyle="border:1pxsolidgreen;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<inputtype="button"style="margin:auto;display:inline-block;height:40px;"value="click"><spanstyle="background:#aaeeff;height:40px;">helloworld</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:10px0px;}
三.绝对居中
1、利用百分比偏移和margin负值，该方法对所有元素生效，该方法兼容所有浏览器
<style>
.div_1{
position:relative;
border:solid1pxred;
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:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>
2、利用绝对定位0偏移和margin:auto;，两侧偏移都被设置为0时，margin:auto将使内容居中，该方法对所有元素生效，该方法不兼容低于IE8的浏览器
<style>
.div_1{
position:relative;
border:solid1pxred;
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:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>
3、利用50%偏移和负值偏移，支持所有浏览器
<style>
.outer{
position:relative;
border:1pxsolidred;
width:400px;
height:300px;
}
.cellOuter{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
border:0pxnone;
background:transparent;
}
.cellInner{
position:absolute;
top:-50%;
left:-50%;
width:100%;
height:100%;
border:1pxsolidgray;
}
</style>
<divclass="outer">
<divclass="cellOuter">
<divclass="cellInner">hellocell</div>
</div>
</div>
不使用table和不计算尺寸而且兼容IE6的垂直居中方法我没发现，有知道的同学望赐教。
四.文本挣开div的问题
默认情况下如果没有设置块状元素的高宽，块级元素宽度取最大值，高度取最小值。
IE6下，div内的内容(文本和元素)可以撑开div的高宽(定义了高宽的值)，IE7以上版本和firefox都不存在这个问题
IE7以上版本支持min-heightmax-height，min-widthmax-width，因此在IE7或firefox等较新的浏览器是用min-heightmin-width可以达到IE6下自动撑大元素的效果。
复制代码
代码如下:<style>
#div1{width:600px;height:600px;}
#div2{width:400px;height:200px;}
</style>
<divid="div1">
<divid="div_2">div2</div>
</div>
要让div2在div1中横向居中，解决办法如下：
1.IE中，设置div1的样式：text-align:center;该方法在IE8以上版本和firefox中仅适用于行内元素居中（display:inline;和display:inline-block;及类似效果的元素以及文本，如inputimg等），子元素中的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不太一样，该样式作用于inline-block(或具有类似行内块状效果)的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block元素没有设置vertical-align样式）在垂直方向的对齐方式。
vertical-align无法影响后代元素的内容的对齐方式。
vertical-align对block元素不起作用，因为折行了在垂直方向没有对齐可言。
vertical-align作用于inline元素(如span)时，将决定该元素自身如何对齐于同一行内的inline-block元素，无法影响同辈元素或文本的对齐方式。
vertical-align取值为text-toptext-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://www.jb51.net/css/70053.html
一个例子，firefo、chrome与IE有差别：
复制代码
代码如下:<divstyle="line-height:200px;border:1pxsolid#34538b;">
<spanstyle="font-size:60px;border:1pxsolid#a0b3d6;vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>
复制代码
代码如下:##==================test==================
document.body.innerHTML='<divid="conatiner"style="border:1pxsolidred;width:500px;height:300px;text-align:left;">aaaaaaaaa<divstyle="border:1pxsolidblue;display:inline-block;vertical-align:bottom;"><divstyle="border:1pxsolidgreen;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<inputtype="button"style="margin:auto;display:inline-block;height:40px;"value="click"><spanstyle="background:#aaeeff;height:40px;">helloworld</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:10px0px;}
三.绝对居中
1、利用百分比偏移和margin负值，该方法对所有元素生效，该方法兼容所有浏览器
复制代码
代码如下:<style>
.div_1{
position:relative;
border:solid1pxred;
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:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>
2、利用绝对定位0偏移和margin:auto;，两侧偏移都被设置为0时，margin:auto将使内容居中，该方法对所有元素生效，该方法不兼容低于IE8的浏览器
复制代码
代码如下:<style>
.div_1{
position:relative;
border:solid1pxred;
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:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>
3、利用50%偏移和负值偏移，支持所有浏览器
复制代码
代码如下:<style>
.outer{
position:relative;
border:1pxsolidred;
width:400px;
height:300px;
}
.cellOuter{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
border:0pxnone;
background:transparent;
}
.cellInner{
position:absolute;
top:-50%;
left:-50%;
width:100%;
height:100%;
border:1pxsolidgray;
}
</style>
<divclass="outer">
<divclass="cellOuter">
<divclass="cellInner">hellocell</div>
</div>
</div>
不使用table和不计算尺寸而且兼容IE6的垂直居中方法我没发现，有知道的同学望赐教。
四.文本挣开div的问题
默认情况下如果没有设置块状元素的高宽，块级元素宽度取最大值，高度取最小值。
IE6下，div内的内容(文本和元素)可以撑开div的高宽(定义了高宽的值)，IE7以上版本和firefox都不存在这个问题
IE7以上版本支持min-heightmax-height，min-widthmax-width，因此在IE7或firefox等较新的浏览器是用min-heightmin-width可以达到IE6下自动撑大元素的效果。
相关文章
- 2009-06-19介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置，感兴趣的朋友可2013-05-06使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中，下面是一个权衡的相对结构干净，CSS简单的解决方法2013-04-17宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助2013-04-05关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你2013-03-22在CSS中加了margin:0 auto;却没有效果，不能居中的问题；它的本意就是上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，接下来为大家介绍下两个典型的错误引起2013-03-15
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
接下来将介绍下：div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了2013-02-17单选框和复选框面积很小，不容易点击，造成许多用户的困扰，用户体验不佳，所以表单元素的垂直居中让很多网页布局师为之而困扰，想实现垂直居中效果还真需要一番功夫，还好2013-02-16元素及文本的居中包括(层的横向居中/层的垂直居中/绝对居中)以及文本挣开div的题，也在这里给予了解决方法，感兴趣的朋友可以了解下啊，希望本文可以帮助到你2013-01-18css中让文本居中的属性很简单就可以实现，那就是设置text-align:center即可,让元素水平居中，相信对于许多网页设计师而言都不会陌生,首先，要 让元素水平居中，就必须得了2013-01-11
最新评论