<!--
div {
position:absolute
top:50%
left:50%
margin:-150px 0 0 -200px
width:400px
height:300px
border:1px solid #008800
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>
其实解决的思路是这样的:首们需要position:absolute绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写
注:上面的是一般用于垂直居中与浏览器,想解决div垂直居中与外层div的话,只需要给外层div加上position:relative就好了;记住,外层div要设定高度和宽度
/* --------------首页个人档案------------- */#m_pro { /* 首页个人档案模块 */
margin-left:10pxmargin-bottom:15px
}
#mod_profile .modth { /* 首页个人档案----模块题头 */
display:none
}
#mod_profile .modbox { /* 首页个人档案----模块箱体 */
border:0px solid #006600
}
#m_pro .portrait { /* 首页个人档案----头像区域 */
width:60px!importantheight:60px!important
background:transparentpadding-top:0px
}
#m_pro .portrait img{ /* 首页个人档----案头像 */
width:60px!important
}
#m_pro .userinfo{ /* 首页个人档案----信息区1 */
width:80px!importantheight:50px!importantoverflow:hidden!important
background:transparent!important
}
#m_pro .userinfo nobr{ /* 首页个人档案----信息行 */
color:#99ff33!important
}
#m_pro .userinfo nobr img { /* 首页个人档案----在线状态图标 */
display:none
}
#m_pro .line { /* 首页个人档案----分割线 */
}
#m_pro div.act a,#m_pro div.act a:visited { /* 首页个人档案----信息区文字链 */
color:#FFFFFFtext-decoration:underline
}
#m_pro a.btfan { /* 首页个人档案----加为好友 */
color:#00ff00background:transparenttext-decoration:none!important
border:1px solid #006600filter:Shadow(Color=#000000,strength:3,Direction=135)
}
#m_pro a.btfan img{ /* 首页个人档案----加为好友图标 */
FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=0)
}
/* --------------个人档案页------------- */
#warpper a,#warpper a:visited { /*个人档案页---文字链*/
color:ccccccline-height:20pxfont-size:14px
}
#warpper .photo { /*个人档案页---左区*/
width:180pxheight:400pxmargin-left:10pxpadding-top:295pxpadding-left:0px
background:url(http://baidu.daobalang.googlepages.com/pro-Nokia8800.gif) no-repeat top center
}
#warpper .image img{ /*个人档案页---头像*/
display:none
}
#warpper .f14 { /*个人档案页---用户名*/
display:none
}
#warpper .f14 image { /*个人档案页---在线状态图标*/
display:none
}
#warpper .act{ /*个人档案页---信息区*/
width:180pxtext-align:centermargin-top:0px
}
#warpper .act a:link,#warpper .act a:visited{ /*个人档案页---信息区文字链*/
color:#3399CCfont-weight:600font-size:12pxwidth:100pxtext-decoration:none
}
#warpper .act a:hover{ /*个人档案页---信息区文字链(鼠过)*/
color:#FF0000font-weight:hold
}
#warpper a.btfan{ /*个人档案页---加为好友*/
color:#FF0000!importantborder:0px
}
#warpper .line{ /*个人档案页---信息区分割线*/
display:none
}
#warpper td,#warpper td.tit { /*个人档案页---右区上部信息默认字*/
color:3399CCline-height:20pxfont-size:14px
}
#warpper .pline { /* 个人档案页----分割线 */
width:125pxheight:20pxmargin-left:160px!importantmargin-top:-120pxline-height:20px
background:url(http://daobalang001.googlepages.com/last_online.jpg) no-repeat top left
}
#warpper strong { /*个人档案页---右区下部信息默认字*/
color:3399CCline-height:20pxfont-size:14px
}
#warpper .pitem { /*个人档案页---右区下部信息链接文字*/
margin-top:120px
}