div绝对居中
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="div绝对剧中.aspx.cs" Inherits="div绝对剧中" %>
<!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>div绝对居中</title>
<style type="text/css">
/*居中层CSS,定位页面中央的一点*/
#center
{
background:#ffffff;
height:400px;
width:300px;
/*设置位置*/
top:50%;
left:50%;
position:absolute;
color:#ffcccc;
}
/*内容层CSS,根据中央的一点确定自己的位置*/
#content
{
background:red;
width:300px;
height:200px;
/*设置浮动,脱离居中层限制(菜单什么很有用哦)*/
position:absolute;
/*上右下左的边距,这里设置的2个值,第一个是高,第二个是宽,但都是这个DIV的宽高的一半*/
margin:-100px 0 0 -150px;
/*演示用*/
color:#111111;
}
/*以上两个从http://www.cccbbs.net/htm_data/36/0811/28798.html看到的,进行了一定的修正*/
/*以上两个的合并,只要调用这一个CLASS就OK了*/
#test_center
{
width: 340px;
height: 140px;
left: 50%; top:
50%;
margin-left:-170px;
margin-top: -70px; position: absolute;
background:#BBBBBB;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="center">
<div id="content">
sssssssssssss
</div>
</div>
</form>
</body>
</html>