在Web规范中的网页页面合理布局是应用Div相互配合CSS来完成的。这在其中最常见到的便是使全部网页页面水平垂直居中的实际效果，这是在网页页面合理布局中基础，也是最应当最先把握的专业知识。但是，還是常常会有人问到这个难题，在这里我简易总结1下应用Div和CSS完成网页页面水平垂直居中的方式：
1、margin:auto 0 与 text-aligh:center
在当代访问器（如Internet Explorer 7、Firefox、Opera等）当代访问器完成水平垂直居中的方式很简易，要是设置到上下两边的空白为全自动便可。意即：
#wrap { margin:0 auto;}
上面这段编码的意思是说使wrap这个div到上下两边的间距全自动设定，左右为0（能够为随意）。请在当代访问器（如Internet Explorer 7、Firefox、Opera等）中运作如今的编码：
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在Firefox等当代访问器设置网页页面元素的水平垂直居中，要是特定margin:0 auto;便可
<pre>
div#wrap {
width:760px;
margin:0 auto; /*这里的0能够随意值*/
border:1px solid #ccc;
background-color:#999;
}
</pre>
</div>
</body>
</html>
上面的实际效果很好。可是这在Internet Explorer 6及纠正的版本号中是不起功效的，但是幸亏它有自身的处理方法。在Internet Explorer中text-align特性是可承继的，即在父元素中设定后在子元素中就默认设置具备了该特性。因而大家能够在body标识中设定text-align特性值为center，这样网页页面内全部的元素都会全自动垂直居中，另外大家还要加1个hook把网页页面中的文本变为大家习惯性的阅读文章方法——居左对齐。因而大家要这般来写编码：
body {text-align:center;}
#wrap {text-align:left;}
这样在Internet Explorer中大家就轻轻松松完成了Div的垂直居中对齐。因而要在全部的访问器中显示信息垂直居中的实际效果，大家便可以这样写大家的编码：
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
<!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>
<title> CSS Div完成水平垂直居中对齐的网页页面合理布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在Firefox等当代访问器设置网页页面元素的水平垂直居中，要是特定margin:0 auto;便可
<pre>
div#wrap {
width:760px;
margin:0 auto; /*这里的0能够随意值*/
border:1px solid #ccc;
background-color:#999;
}
在Internet Explorer 6 及下列的版本号中大家还要做下列的设定：
body { text-align:center; }
div#wrap {
text-align:left;
}
</pre>
</div>
</body>
</html>
但是这里有1个前提条件，便是设定垂直居中的元素要有固定不动的宽度，例如这里大家设置了为760像素。
2、相对性精准定位与负的边距
针对wrap开展相对性精准定位，随后应用负的边距相抵偏位量。这类方式较为简易还很非常容易完成：
#wrap {
position:relative;
width:760px;
left:50%;
margin-left:⑶80px
}
这段编码的意思是，设定wrap的精准定位是相对其父元素body标识的，随后将其左侧框挪动到网页页面的中间（也便是left:50%含义）；最终大家再从正中间部位向左偏位回1半的间距来，这样就完成了水平垂直居中了。
<!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>
<title> CSS Div完成水平垂直居中对齐的网页页面合理布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:⑶80px;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在全部访问器中都合理的方式：
<pre>
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:⑶80px;
border:1px solid #333;
background-color:#ccc;
}
</pre>
</div>
</body>
</html>
一样，在设置水平垂直居中前你必须设置1个固定不动的宽度。
P.S.到底挑选哪一个方式？
上面两个方式到底挑选哪样方式好呢？在第1种方式中貌似应用了Hack技术性，实际上并沒有，它是中规中矩的Web规范写法，彻底合乎标准，因而，两个种方式中彻底能够随意的选择在其中的任1种开展应用，她们不存在CSS hack的难题。
3、其它的垂直居中方法
上面所说的全是设置了实际宽度的状况下水平垂直居中的完成。有时大家想做1个延展性合理布局，或当1个元素处在1个器皿中时大家只想让它垂直居中其实不想设置1个实际的宽度。实际上这其实不是真实的垂直居中合理布局，就像对1个100%长度的元向来说，你说它是垂直居中对齐還是居左对齐呢？因此全部不高宽度的垂直居中都并不是真实的垂直居中。这样的设计方案大家是应用的像元素的padding来设定的，具体中大家是更改了父元素的器皿尺寸：
如大家期待wrap元素长度随对话框而更改，另外又保持垂直居中，大家便可以这样写：
body {
padding:10px 150px;
}
这里，大家只必须维持父元素上下两边的填充是相同的便可以了。
<!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>
<title> 随访问器对话框尺寸而更改的具备延展性的垂直居中合理布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
1种随访问器对话框尺寸而更改的具备延展性的垂直居中合理布局：
<pre>
body {
padding:10px 150px;
}
这里，大家只必须维持父元素上下两边的填充是相同的便可以了。
</pre>
</div>
</body>
</html>
自然这只是“貌似垂直居中”，但是却经常很有效处。