div水平垂直居中的完美解决方案

zhangpeng 2015-03-09

原文地址:http://www.jb51.net/css/28259.html

让div居中对齐

使用margin-left:auto;margin-right:auto;可以让你的div居中对齐。

.style{margin-left:auto;margin-right:auto;}

缩写形式为:

.style{margin:0auto;}

数字0表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>居中div演示效果</title>

<styletype="text/css">

.align-center{

margin:0auto;/*居中这个是必须的,,其它的属性非必须*/

width:500px;/*给个宽度顶到浏览器的两边就看不出居中效果了*/

background:red;/*背景色*/

text-align:center;/*文字等内容居中*/

}

</style>

</head>

<body>

<divclass="align-center">居中div演示效果</div>

</body>

</html>

注意,需要加上上面的那句

才能生效,要是不想要这句的话,也可以给body加一个属性:

body{text-align:center;}

另外,让div内的内容(包括文字及图片)居中的代码是:text-align:center;

div居中的完美解决方案!(水平垂直居中)

1,关于居中使用css为:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;

对于ie6,只能把position:改成absolute;

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>水平垂直居中div演示效果</title>

<styletype="text/css">

.align-center{

position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;

}

</style>

</head>

<body>

<divclass="align-center">水平垂直居中div演示效果</div>

</body>

</html>

相关推荐