CSS高度为auto的div中,内部div怎么上下居中

html-css019

CSS高度为auto的div中,内部div怎么上下居中,第1张

<style type="text/css">

<!--

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

}