1，普通div居中的样式定义：
复制代码 代码示例:
body {text-align: center;}
#center { margin-right: auto; margin-left: auto; }
说明：
首先，在父级元素定义text-align: center;
在父级元素内的内容居中；对于ie这样设定就已经可以了。
但在mozilla中不能居中。
解决办法：
在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”
注意：如果想用这个方法使整个页面要居中，建议不要套在一个div里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
2，使图片在div中垂直居中的方法（使用背景）：
举例：
复制代码 代码示例:
body{background: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif)#fff no-repeat center;}
关键在于最后的center，这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"。
3，使文本在div中垂直居中
文字不能用背景方法，可以用增高行距的办法变通实现垂直居中。
代码如下：
复制代码 代码示例:
<html>
<head>
<style>
body{text-align: center;}
#center{ margin-right: auto;
margin-left: auto;
height:200px;
background:#f00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>
脚本学堂，欢迎大家的光临。</p></div>
</body>
</html>
说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个div一样高line-height:200px;然后插入文字，就垂直居中了。
4，css+div控制页面中元素垂直居中
全局和区域垂直居中
方法1：
复制代码 代码示例:
<style type="text/css" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientheight-50)/2);
width: 50px;
height: 50px;
background: #fff;
}
#c
{
position: absolute;
left: expression((body.clientwidth-50)/2);
top: expression((body.clientheight-50)/2);
width: 50px;
height: 50px;
background: #f00;
}
</style>
<div id="a">
<div id="b"></div>
</div>
<div id="c">脚本学堂，欢迎大家的光临。</div>
方法2：
复制代码 代码示例:
<div style="background:blue;position:absolute;left:expression((body.clientwidth-50)/2);top:expression((body.clientheight-50)/2);width:50;height:50"></div>
>>> 查看更多 css 居中 相关教程 <<<
