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浏览器( 三 )

推荐阅读

用vivo手机，这5个功能必须知道

糙米生虫了还能吃吗

佳明手表怎么设置时间

淘宝宝贝类目怎么修改

腊梅扦插方法，腊梅可以扦插繁殖吗？

驾驶过程中如何防止在高速中爆胎汽车驾驶过程当中防止在高速中爆胎的方法

料酒和黄酒有什么区别料酒和黄酒的区别简述

单相电表和三相电表的区别在哪里

结婚可以穿黑色婚纱吗婚纱颜色禁忌

三八节手抄报怎么画三八节手抄报

为什么电脑安装微信无响应

为什么公牛与公牛会斗,要怎样养公牛

渡渡鸟生活在哪个岛上

传统木桶饭的做法

南京工业学院，南京工业职业学院

火影忍者ol怎么买限时体验卡,《火影忍者OL》寒假大作战

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

推荐阅读

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