CSS设置DIV垂直居中的N种方法兼容IE浏览器( 三 ) _云知道

div#content{

border:1pxsolid#000;

position:relative;

top:-50%;
}br/pre
/div
/div
/div
/body
/html

五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。
CSS Code复制内容到剪贴板
div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;

}

至此，一个完美的居中方案就产生了。
XML/HTML Code复制内容到剪贴板
html
head
　title多行文字实现垂直居中/title
　metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
styletype=text/css
body{font-size:12px;font-family:tahoma;}
div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;
}
/style
/head
body
divid=wrap
divid=subwrap
divid=contentbr
pre现在我们要使这段文字垂直居中显示！
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}br/pre
/div

/div
/div
/body
/html

PS:垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

六、实测可以完美实现各种浏览器兼容的居中方案
下面这段代码经过实测，可以完美兼容IE7以上的IE浏览器，其它标准浏览器如火狐、谷歌等也没有问题。

说明：尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;)，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
XML/HTML Code复制内容到剪贴板
!doctypehtml
html
head
metacharset=utf-8
title水平垂直居中/title
styletype=text/css
body{padding:0;margin:0;}
body,html{height:100%;}
#outer{height:100%;overflow:hidden;position:relative;width:100%;}
#outer[id]{display:table;position:static;}
#middle{position:absolute;top:50%;}/*forexploreronly*/
#middle[id]{display:table-cell;vertical-align:middle;position:static;}
#inner{position:relative;top:-50%;margin:0auto;}/*forexploreronly*/
div.greenBorder{width:500px;height:584px;background:#333;}
* html#outer[id]{position:relative;}
* html#middle[id]{position:absolute;}
/style

/head
body
divid=outer
divid=middle
divid=innerclass=greenBorder
/div
/div
/div
/body

/html

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id] 。

CSS设置DIV垂直居中的N种方法兼容IE浏览器( 三 )

推荐阅读

Photoshop cs5之混合选项的使用

vivos12和iqooneo5s哪个好 vivos12和iqooneo5s对比

oppo怎么设置自定义桌面

如何解除防沉迷

oppo手机屏幕刷新率怎么调

面瘫患者养护宜忌面瘫患者养护宜忌有哪些

洋姜学名叫什么洋姜学名叫啥

过期面粉怎么处理

t_cross中文名

膝盖疼有点肿怎么回事膝盖疼有点肿怎么回事吃什么药

驱除鞑虏什么意思

列举两汉著名的赋作家以及代表作

都哪里地震了,青海都发生了地震

男冬天白色裤子搭配什么鞋子男秋冬白色裤子怎么搭配

永恒纪元修炼石换什么好,创世纪元开启《永恒纪元》魔戒降临

Android 移动办公app

CSS设置DIV垂直居中的N种方法 兼容IE浏览器( 三 )

推荐阅读

CSS设置DIV垂直居中的N种方法兼容IE浏览器( 三 )