<%@ 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>