让DIV垂直居中
发布网友
发布时间：2022-04-23 07:23
共9个回答
热心网友
时间：2022-04-22 01:58
给你一段小代码，存成.html文件，用浏览器打开看看
<!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>水平垂直居中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>水平垂直居中div演示效果</div>
</body>
</html>
我这里是这样的效果：
看一下代码，也许稍作修改，就能满足你的需要。谢谢
热心网友
时间：2022-04-22 03:16
实际上在Css+div中水平居中是align属性，margin只是个辅助。
相对的垂直居中用的是v-align和line-height，就是说定义了行高和V-align属性居中就ok了。
热心网友
时间：2022-04-22 04:50
设置固定位置，距左，距上按需调整：
热心网友
时间：2022-04-22 06:42
最简单的办法是把他放在一个一行一列的表格里
table是默认垂直居中的
兼容所有浏览器
<table width="800" border="1">
<tr>
<td height="600" bgcolor="#006666">
<div style="width:300px; height:30px; background:#903;"></div>
</td>
</tr>
</table>
热心网友
时间：2022-04-22 08:50
不一定要用JS吧 你可以用CSS的定位就行了
热心网友
时间：2022-04-22 11:14
DIV要写嵌套才行 用table吧 设置一下居中就行了
热心网友
时间：2022-04-22 13:56
margin:0 auto;
热心网友
时间：2022-04-22 16:54
谁说得用JS才行？
方法1；width:300px;height:100px;line-height:100px;
方法2；利用padding-top属性来使其垂直居中。
热心网友
时间：2022-04-22 20:08
下面代码经过调试，请直接使用即可
<html>
<head>
<title>内容左右上下居中</title>
<style type="text/css">
.centerss {
height: 300px;
width: 500px;
margin: auto;
background-color: #CCC;
text-align: center;
line-height:300px;
}
</style>
</head>
<body style="text-align:center;">
<div class="centerss">此处显示文字居中的内容</div>
</body>
</html>追问我要的是DIV垂直居中，不是文字在DIV里面居中
追答这个就是整个层在屏幕中间
* { margin:0; padding:0; list-style:none; font-size:14px;}/*---该css reset仅用于demo，请自行换成适合您自己的css reset---*/
html { height:100%;}
body { height:100%; text-align:center;}
.centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:center; width:200px; padding:10px; border:1px solid #f60; background:#fc0;}
.hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
垂直居中，左右居中
