.style{margin-left:auto;margin-right:auto;}
縮寫形式爲:
.style{margin:0 auto;}
數字0 表示上下邊距是0。可以按照需要設置成不同的值。
<!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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中div演示效果</title>
<style type="text/css">
.align-center{
margin:0 auto; /* 居中 這個是必須的,,其它的屬性非必須 */
width:500px; /* 給個寬度 頂到瀏覽器的兩邊就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等內容居中 */
}
</style>
</head>
<body>
<div class="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;
<!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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平垂直居中div演示效果</title>
<style type="text/css">
.align-center{
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
}
</style>
</head>
<body>
<div class="align-center">水平垂直居中div演示效果</div>
</body>
</html>