div 如何垂直居中?

neujeff83 2010-03-19 12:48:54

#div_container
{
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-left: expression(-( this . offsetWidth/ 2) + "px" );
background: red;
}

这样就左右居中了....
但是添加上 top: 50%;
margin-top: expression(-( this . offsetheight/ 2) + "px" );
也没有垂直居中啊...请问垂直居中的写法

...全文

80 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

艾思软件-app开发公司 2010-03-19

打赏
举报

<style>

#div_container 

{

position: absolute;

width: 200px;

height: 200px;

left: 50%;

margin-left: expression(-( this . offsetWidth/ 2) + "px" );

background: red;

top:50%;

margin-top: expression(-( this . offsetHeight/ 2) + "px" );



}

</style>

<div id=div_container ></div>

挨踢直男 2010-03-19

打赏
举报

div 好像没有垂直居中的说法的吧

你的页面设计思路不对

rainsilence 2010-03-19

打赏
举报

你的方法只有在绝对定位的情况下才有效

<html>
<head>
<style>
#container {
line-height:200px;
height: 200px;
width: 200px;
border-style: solid;
border-width: 1px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container">1</div>
</body>
</html>

这个方法通用
注意line-height:200px;这句是必要的。

郭大侠_ 2010-03-19

打赏
举报

建议css中别用 expression，很多浏览器不支持的。

艾思软件-app开发公司 2010-03-19

打赏
举报

不过个人感觉,这样更合理,好看一点

<style>

#div_container 

{

position: absolute;

width: 200px;

height: 200px;

background: red;



left: expression(document.body.clientWidth/2 -( this . offsetWidth/ 2) + "px" );

top: expression(document.body.clientHeight/2 -( this . offsetHeight/ 2) + "px" );



}

</style>

<div id=div_container ></div>