CSS实现垂直居中的几种实现方式
注:此文由断指鹤搜集而来,都在高级浏览器下测试过,但不敢保证IE8以下会不会出现问题。
页面设计中垂直居中几种实现方式:
垂直居中主要用两种情况,第一种是内外元素的高度全定,这种情况处理起来相对简单,方法也很多;第二种是外高度定了,但内高度不定,这种情况处理起来相对困难。下面,便介绍下两种情况下的解决方案。
内外元素高度全部确定的情况
1、line-height与height值设相同值。
此种方法最简单,但局限性很大,只有单行文本才能够适用。具体示例如下:
●CSS写法:
.vertical{
height: 100px;
line-height:100px;
}
●HTML写法:
此方法优点:适合在所有浏览器,没有足够空间时,内容不会被切掉。此方法缺点:仅适合应用在文本和图片上,并且这种方法,当你文本不是单行时,效果极差,差到让你感到恶心。
2、给父容器设置相对定位,然后将本元素也设置为相对定位,top
设置成50%,margin-top设置成:height/2,具体示例如下:
●CSS代码:
.out{
position:relative;
width:400px;
height: 400px;
border: solid 1px gray;
}
. .vertical{
height: 100px;
width: 100px;
border: solid 1px gray;
position:relative;
top:50%;
margin-top:50px;
}
●HTML代码:
此方法优点:能够在多浏览器下运行,适用任何定高的div。
此方法缺点:由于固定死元素的高度,致使没有足够的空间,当内容超过容器的大小时,要么会消息,要么会出现滚动条(如果元素在body内,当用户缩小浏览器窗口时,body的滚动条将不会出现)。
3、这种方法有点新意,用这种方法你需要在居中元素前面放一个空的
●CSS代码:
html,body {height: 100%;}
#floater{
float:left;
height:50%;/*相对于父元素高度的50%*/
margin-bottom: -120px;/*值大小为居中元素高度的一半*/
}
#content {
clear:both;/*清除浮动*/
height: 240px;
position: relative;
}
●HTML代码:
此方法优点:兼容所有浏览器。
此方法缺点:元素高度需确定,内容不够时,若设置overflow属性,元素会被切掉,或是出现滚动条;
内外元素高度全部确定实现方法挺多的,这里就不一一介绍了,下面介绍下外高度定,内高度不定的情况。
外层元素高度确定,内层高度不确定的情况
1、使用div的模拟表格效果,也就是说将多个
●CSS代码:
#container {
height: 300px;
display: table;/*让元素以表格形式渲染*/
}
#content {
display:table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直对齐*/
}
●HTML代码:
此方法优点:没有高度限制;
此方法缺点:这种方法只适合现代浏览器,在IE6-7下无法正常运行。
5、这种方法是采用的display:inline-block,然后借助另一个元素的高度来实现居中
●CSS代码:
#parent {
height: 500px;/*定义高度,让线盒型div#extra有一个参照物,可以是固定值,也可以是百分比*/
border: 1px solid red;
}
#vertically_center{
display: inline-block;
width: 100%;
vertical-align: middle;
border: 1px solid #f00;
}
#extra {
display: inline-block;/*把元素转为行内块显示*/
vertical-align: middle;/*垂直居中*/
height: 100%; /*设置线盒型为父元素的100%高度*/
}
●HTML代码:
I am vertically centered!
此方法优点:可自适应高度,简单易懂;
此方法缺点:需一个额外的标签,且IE6-7不支持block-inline属性,所以其在IE6-7下不起作用;
6、用line-height来定义最外层的行高(例如:原来的height为200px,此方法将line-height设置为200px,不给height设值)
CSS代码:
.vertical-outer{
line-height: 150px;
border: 1px dashed #ccc;
width: 300px;
}
.vertical-inner{
line-height: 24px;
vertical-align: middle;
display: inline-block;
font-size: 18px;
margin-bottom: 6px;
}
HTML代码:
this is a test this is a test this is a test this is a test this is a test
此方法优点:可自适应高度,简单易懂
此方法缺点:只支持HTML,且需要一个margin-bottom的修正值,为内部元素行高的四分之一。
以上便是常见的用CSS实现元素居中的方法了,当然,面对一些特殊问题,一些难处理的垂直居中,可以考虑用JS来处理。