全部
Ada助手

如何让DIV垂直居中

letian003 2008-04-25 09:16:07

在一个页面中，只有一个DIV，请问如何使这个DIV垂直居中呢，

...全文

给本帖投票

3413 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

GossZhang 2011-03-13

打赏
举报

只求一看，

knowledge_Is_Life 2008-05-01

打赏
举报

没遇到过这种情况.

wuzhongbo 2008-04-26

打赏
举报

ten789 2008-04-26

打赏
举报

body 设置高度相对绝对都可以

然后各区块就可以设定高度了

yagas 2008-04-26

打赏
举报

<!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=utf-8" />
<title>无标题文档</title>
<style>
.dd { width:300px; height:30px; margin:0px auto; border:1px solid #000000 }
</style>
</head>

<body>
<div class="dd"></div>
</body>
</html>

letian003 2008-04-25

打赏
举报

[Quote=引用 2 楼 sunfan1010 的回复:]
<html>
<style>
#center {
background: #090;
width: 100px;
height: 96px;
position: relative;
left: 50%;
margin-left: expression(-(this.offsetWidth/2)+"px");
margin-top:20%;

}
</style>
<div id='center'>
</div>
[/Quote]

这个这样子写可能更好一点。
<style>
#center {
background: #090;
width: 100px;
height: 96px;
position: relative;
margin:20% auto auto;
}
</style>
</head>

<body>
<html>

<div id='center'>
fffffff
</div>
</body>
</html>

beeqee 2008-04-25

打赏
举报

http://www.blueidea.com/tech/web/2006/3231.asp
CSS实现完美垂直居中

striker_un 2008-04-25

打赏
举报

通常在ie和ff下是两种方式。



<style>

/**我是考虑到层的高度，设为百分之43*/

.myDiv{

 

    position: fixed;

    top: 43%;

    left: 50%;

    margin-left: -300px;

	width:500px;

     border: 1px solid #93a6aa;

	background-color:#dfe6ed;

    padding: 10px;

}





* html .myDiv{

     position: absolute;

	 width:600px;

     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(43 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');

}

</style>





<div class="myDiv"> 这个居中了没有?</div>

jy_1201 2008-04-25

打赏
举报

DIV+TABLE不好吧，还是直接用CSS实现吧。

------------------------------------------
酷得组件仓库 - 第三方软件开发组件下载\试用
www.cookcode.net

daxian22 2008-04-25

打赏
举报

sunfan1010 2008-04-25

打赏
举报

<html>
<style>
#center {
background: #090;
width: 100px;
height: 96px;
position: relative;
left: 50%;
margin-left: expression(-(this.offsetWidth/2)+"px");
margin-top:20%;

}
</style>
<div id='center'>
</div>

jayflee 2008-04-25

打赏
举报



<BODY>



<TABLE height="100%">

<TR>

	<TD>

		<div>

			aaaaaaaaaaaa

		</div>

	</TD>

</TR>

</TABLE>

</BODY>

letian003 2008-04-25

打赏
举报

都不是太满意呀，有没有更好一点的方法呀。

在我们排版的过程当中,有许多样式要求我们把div设置成为垂直居中但有些小伙伴不知道怎么做,下面就跟着博主来实现如何让div垂直居中,可用一下几种方法注: 1.1 dispaly:table-cell,这是对类似文字元素起作用的,所以...

利用CSS进行元素的水平...本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：

div垂直居中div垂直居中代码示例如下：前台效果如下图所示：如图所示，div中的文字垂直居中。其中主要的属性就是line-height。line-height属性设置行间的间隔(行高即垂直方向)。line-height属性会影响行框的规划。在...

第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...

关于如何让div垂直居中这个问题，是初级前端面试被问到的较为基础以及很常见的一道题目，下面我将总结一下让div垂直居中的击中方法。 1.图片展示 2. 首先它分为以下两种情况： <body> <div class="wrap"&...

基础编程

21,894

社区成员

140,348

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章