做网站前台时,我们经常用让指定宽度的页面居中。本以为很简单,text-align:center,就搞定,可做时让大吐苦水,下面就把代码贴下来与大家共享!
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="WebPage_test_Default2" %>
<!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">
body{ padding:0; margin:0; text-align:center;}
<%--必须让内边距和外间距都设为auto才可以,只指定宽度不会居中,切切注意,我就是在这点花费好长时间--%>
#container{ padding:auto; margin:auto; 1000px; }
#bg{ background-color:Fuchsia; height:400px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="bg">
</div>
</div>
</form>
</body>
</html>
<!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">
body{ padding:0; margin:0; text-align:center;}
<%--必须让内边距和外间距都设为auto才可以,只指定宽度不会居中,切切注意,我就是在这点花费好长时间--%>
#container{ padding:auto; margin:auto; 1000px; }
#bg{ background-color:Fuchsia; height:400px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="bg">
</div>
</div>
</form>
</body>
</html>