关于DIV居中布局的几种实现方法

2010-08-28 10:47:36来源：西部e网作者：

现在DIV+CSS布局越来越流行了，所以咱也得赶上潮流，前阵有人问过我关于DIV居中布局的问题，当时我也不太懂，于是便一起研究了一下，今天就来作个小结。

最先发现的是XHTML里用margin实现居中布局。这种方法是从Z-BLOG官方网站挖出来的。至今不知道原理，实践得知若不在顶部加上<!DOCTYPE ... > 就不能正常居中。所以临时断定，此法为XHTML专用方法。有知道详情的希望提供相关文档，谢谢~!^_^

看以下示例，去掉第一行就发现居中失效。

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Xiaosa">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
<!--
/* Coded By Xiaosa @ 2005-9-17  */
    #Content{
      margin-left: auto;
	  margin-right: auto;
	  background: #090;
	  width: 455px;
	  height: 96px;
	}

	#inner {
      background: url(http://xs.org.cn/2005/xsblog/style/cartoon/banner.gif) no-repeat;
	  width:100%;
	  height:100%;
	}
-->
</style>

</HEAD>
<BODY>

   <div id="Content">
       <div id="inner">
	   </div>
   </div>

</BODY>
</HTML>

再接下来这种方法算是"偏方"了，不知道哪个牛人想出来的？利用left和margin-left间接实现。left为50%(页面的一半)，margin-left为-width的一半。这样两个一半之差，就正好是DIV的中心座标了。妙哉！顺便提下，这种方法还需要先设定position为relative 才能正常显示。
后来我把margin-left的值用expression自动计算，这样就只剩一个width参数需要自定了。

看以下示例，注意第一二行与上例的差别。

<html>
<head>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Xiaosa">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
<!--
/* Coded By Xiaosa @ 2005-9-17  */
    #Content{
	  background: #090;
	  width: 455px;
	  height: 96px;
	  position: relative;
	  left: 50%;
	  margin-left: expression(-(this.offsetWidth/2)+"px");
	}

	#inner {
      background: url(http://xs.org.cn/2005/xsblog/style/cartoon/banner.gif) no-repeat;
	  width:100%;
	  height:100%;
	}
-->
</style>

</HEAD>
<BODY>

   <div id="Content">
       <div id="inner">
	   </div>
   </div>

</BODY>
</HTML>

我所有的效果都是在IE6下调试的，不知道在其他浏览器下效果如何。以下这种是我昨天无意中看到的，据说最低可以支持到IE3.0，非IE偶也8考虑。(嘿嘿……这句估计会遭扁了。)基本原理是利用body的text-align来实现居中。

不多说了，看代码。

<html>
<head>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Xiaosa">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
<!--
/* Coded By Xiaosa @ 2005-9-17  */
    body {
      text-align: center;
	}

    #Content {
	  text-align: left;
	  background: #090;
	  width: 455px;
	  height: 96px;
	}

	#inner {
      background: url(http://xs.org.cn/2005/xsblog/style/cartoon/banner.gif) no-repeat;
	  width:100%;
	  height:100%;
	}
-->
</style>

</HEAD>
<BODY>

   <div id="Content">
       <div id="inner">
	   </div>
   </div>

</BODY>
</HTML>

关键词：xhtml

关于DIV居中布局的几种实现方法

相关阅读:

赞助商链接: