WebBuild

CSS布局基础--水平和垂直居中

作者:parno 日期:2006-08-03

字体大小: 小中大

在div+css布局中，居中问题是每个初学者都会碰到的问题：

水平居中

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
	<title>demo</title>
	<style type="text/css">
	body{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		margin: 0;
		padding: 0;/*--for opera--*/
		text-align: center;/*--for IE5.0--*/
	}
	
	#layout{
		margin: 0 auto;/*--居中 --*/
		width: 760px;/*--宽度必须的--*/
		text-align: left;
		background: #F6F6F6;
	}
	
	pre{
		padding: 15px;
	}
	</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="layout"><pre>
	body{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		margin: 0;
		padding: 0;/*--for opera--*/
		text-align: center;/*--for IE5.0--*/
	}
	
	#layout{
		margin: 0 auto;/*--居中 --*/
		width: 760px;/*--宽度必须的--*/
		text-align: left;
		background: #F6F6F6;
	}
	
	pre{
		padding: 15px;
	}
</pre>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另外，经典论坛阿捷的例子：

主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}

说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

完整举例代码如下：

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

垂直居中

若BOX的宽度和高度已知：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
	
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" >
<head>
	<title></title>
	<style type="text/css">
	body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;/*--for opera--*/
	}
	
	#layout{
	position: absolute;/*--绝对定位--*/
	top: 50%;
	left: 50%;
	margin-top: -240px;/*--div高度的一半--*/
	margin-left: -320px;/*--div宽度的一半--*/
	width: 640px;	
	height: 480px;
	background: #ECECEC;
	}

pre{
	padding: 15px;
	}
	</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="layout"><pre>	body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;/*--for opera--*/
	}
	
	#layout{
	position: absolute;/*--绝对定位--*/
	top: 50%;
	left: 50%;
	margin-top: -240px;/*--div高度的一半--*/
	margin-left: -320px;/*--div宽度的一半--*/
	width: 640px;	
	height: 480px;
	background: #ECECEC;
	}

pre{
	padding: 15px;
	}
</pre></div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

解释：如果把屏幕中点设为坐标原点（0 0），X的正方向是屏幕的右边，Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下，设BOX的属性为绝对定位，top：50% left：50%，这样的话，BOX的左上角就在坐标原点（0 0），设margin-left：-320px(宽度的一半), 左上角的坐标（-320 0），再设margin-top：-240px（高度的一半），左上角的坐标现在是（-320 240），相对原点来说， BOX是完全居中了，四个顶点的值分比别是（320 240）Ⅰ，（-320 240）Ⅱ，（-320 -240）Ⅲ ，（320 -240）Ⅳ。

适用于首页带语言选择版本或者欢迎页。

单行文字可采用行高来实现垂直居中，或者用padding来调整。

[本日志由 admin 于 2006-08-05 04:25 PM 编辑]