如让DIV 块垂直局中？

于娜 2011-01-14 09:10:08

<!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>
</head>
<body>

<div style="width:100px; height:100px; background-color:red;"></div>

</body>
</html>

...全文

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

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

Mr-Jee 2011-01-15

打赏
举报

如果是固定宽高的话何须js
但是我认为弹出的div需要resize的。所以我想还是js来控制吧

tongwei0071 2011-01-15

打赏
举报

*{margin:0 auto;padding:0}
可以使DIV在左右居中

在上下中间居中
可以控制TOP属性
<script>
var c_h = document.body.clientHeight?document.body.clientHeight : document.documentElement.clientHeight;
c_h = c_h.substring(0,c_h.length-2);
var div_height = 获得div.style.height;
div_height = div_height.substring(0,div_height.length-2);
var div_Object = document.getElementById("div_id");
div_Object.style.top = (c_h - div_height) / 2 + "px";

</script>

于娜 2011-01-15

打赏
举报

于娜 2011-01-15

打赏
举报

[Quote=引用 3 楼 pillar0514 的回复:]
如果DIV宽度与高度不变，相当easy：

HTML code

<!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/xhtm……
[/Quote]

你的方法是好，但是IE6 下不显示？？

hch126163 2011-01-15

打赏
举报

window.onload = function(){

document.getElementById('test').style.top = ((document.documentElement.clientHeight-div.offsetHeight)/2) + 'px';
};

licip 2011-01-15

打赏
举报

像三楼的方法，我觉得很好，用百分比吧。可以跟着窗口大小一起变化。

zell419 2011-01-15

打赏
举报

顶楼上。
绝对定位的DIV绝对居中 ~很方便 ~

yjjlyyj151 2011-01-15

打赏
举报



<!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" />

        <meta name="author" content="Chomo" />

        <link rel="start" href="http://www.14px.com" title="Home" />

        <title>根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶</title>

        <style type="text/css">

            * { 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:left; 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;}

        </style>

    </head>

    <body>

        

        <div class="centerDiv">

            蓝色理想<br/>

        </div><div class="hiddenDiv"></div>

    </body>

</html>

pillar0514 2011-01-14

打赏
举报

如果DIV宽度与高度不变，相当easy：



<!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>

</head>

<body>

    

<div style="width:100px; height:100px; left:50%; top:50%; margin-left:-50px; margin-top:-50px; position:absolute; background-color:red;"></div>

    

</body>

</html>

Mr-Jee 2011-01-14

打赏
举报

<!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>

<script type="text/javascript">

	function returnStyle(obj,styleName){

		var myObj = typeof obj == "string" ? document.getElementById(obj) : obj;

		if(document.all){

			return eval("myObj.currentStyle." + styleName);

		} else {

			return eval("document.defaultView.getComputedStyle(myObj,null)." + styleName);

		}

	}

	window.onload = function(){

		var page = document.documentElement.clientHeight;

		var div = document.getElementById('test');

		var height = parseInt(returnStyle(div,'height'));

		div.style.top = ((page-height)/2) + 'px';

	};	

</script>

<style type="text/css">

	#test {

		height:100px;

		width:100px;

		background-color:#eee;

		position:absolute;

	}

</style>

</head>



<body>

	<div id="test"></div>

</body>

</html>

kaifadi 2011-01-14

打赏
举报

<div style="position:absolute; top:50%; left:50%;width:100px; height:100px; background-color:red;"></div>
改这样试试行不？百分百精确很难，实测，因为一般屏幕的最大范围跟可视范围也许不同，还需要更改其他数值，也许40%更合适些。