fix且绝对居中，除IE6不能静态居中外，其它浏览器都静态居中
2011-03-18 14:06 yuejianjun 阅读(373) 评论(0) 编辑 收藏 举报<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#mask
{
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background: black;
line-height: 100%;
filter: alpha(opacity=50);
opacity:0.5;
-moz-opacity: 0.5;
}
.container
{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
display:table;
text-align:center;
}
.center
{
position:static;
top:0px;
left:0px;
height:100%;
width:100%;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.form
{
background:white;
border:solid 1px green;
margin-left:auto;
margin-right:auto;
display:inline-block;
display:-moz-inline-box;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.container
{
display:block;
}
.center
{
display:block;
position:absolute;
top:50%;
left:50%;
height:auto;
width:auto;
}
.form
{
position:relative;
top:-50%;
left:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="center">
<p class="form">For all browser</p>
</div>
</div>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#mask
{
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background: black;
line-height: 100%;
filter: alpha(opacity=50);
opacity:0.5;
-moz-opacity: 0.5;
}
.container
{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
display:table;
text-align:center;
}
.center
{
position:static;
top:0px;
left:0px;
height:100%;
width:100%;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.form
{
background:white;
border:solid 1px green;
margin-left:auto;
margin-right:auto;
display:inline-block;
display:-moz-inline-box;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.container
{
display:block;
}
.center
{
display:block;
position:absolute;
top:50%;
left:50%;
height:auto;
width:auto;
}
.form
{
position:relative;
top:-50%;
left:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="center">
<p class="form">For all browser</p>
</div>
</div>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
line<br/>
</body>
</html>
