查看完整版本 : 如何让一个div垂直居中


haokeyy
2008-05-03 14:54

代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#layout {
 background-color: red;
 height: 300px;
 width: 400px;
 margin: 0 auto;
}
body {
 text-align: center;
}
-->
</style>
</head>

<body>
<div id="layout">此处显示  id "layout" 的内容</div>
</body>
</html>

这个水平居中的div,在不加额外的div同时,通过css怎么实现,让它垂直居中,


豆猫
2008-05-03 18:18
如果页面里只有这么一个div,可以使用绝对定位来居中。

代码:
<!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>

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

<title>无标题文档</title>

<style type="text/css">

<!--

* {

margin:0;

padding:0;

}

html,

body {

height:100%;

text-align:left;

}

#layout {

background-color: red;

height: 300px;

width: 400px;

margin: -150px 0 0 -200px;

position:absolute;

top:50%;

left:50%;

}

-->

</style>

</head>



<body>

<div id="layout">此处显示  id "layout" 的内容</div>

</body>

</html>






haokeyy
2008-05-04 12:07
就是这种效果,感谢猫版~~~ :cool:

leozhu
2009-05-12 17:42
豆猫, 有问题请教你   28633965  这是我qq 急求~!

豆猫
2009-05-12 19:07
引用:( leozhu @ 2009-05-12 17:42 查看原帖 )
豆猫, 有问题请教你   28633965  这是我qq 急求~!

有问题在论坛里说就好啊