怎么用js让一个div定位于屏幕的正中，适应分辨率 .conent{ width: 980px; height:680px;}
展开全部
这个确实不用JS，同意 小文_计算机 的做法，俺平常也是这样做的
原理：让DIV的原心与浏览器的原心重合。
样式： { position:absolute; left:50%; top:50%; width:300px; height:200px; margin-left:-150px; margin-top:-100px;}
1. position:absolute; 绝对定位，便于下面定位容器左上角的位置
2. left:50%; top:50%; 此时容器的左上角已经与浏览器正中央重合，接下来再让容器向左和向上分别移动宽度和高度的一半，容器原心就和浏览器原心重合了。
3. width:300px; height:200px; margin-left:-150px; margin-top:-100px; 定义容器宽高，并向左和向上移动宽度和高度的一半，大功告成！
原理：让DIV的原心与浏览器的原心重合。
样式： { position:absolute; left:50%; top:50%; width:300px; height:200px; margin-left:-150px; margin-top:-100px;}
1. position:absolute; 绝对定位，便于下面定位容器左上角的位置
2. left:50%; top:50%; 此时容器的左上角已经与浏览器正中央重合，接下来再让容器向左和向上分别移动宽度和高度的一半，容器原心就和浏览器原心重合了。
3. width:300px; height:200px; margin-left:-150px; margin-top:-100px; 定义容器宽高，并向左和向上移动宽度和高度的一半，大功告成！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不用 js ，纯 css 就可以
原理：
1. 左定位 50%(一半的屏幕)
2. 左边距，减自身宽度的一半。
<style>
#d1{
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 100px;
left: 50%;
margin-left: -100px;
position: absolute;
width: 200px;
}
</style>
<div>123</div>
自己用js动态修改css属性
原理：
1. 左定位 50%(一半的屏幕)
2. 左边距，减自身宽度的一半。
<style>
#d1{
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 100px;
left: 50%;
margin-left: -100px;
position: absolute;
width: 200px;
}
</style>
<div>123</div>
自己用js动态修改css属性
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title></title>
<style type="text/css">
.conent
{
width: 980px;
height:680px;
border:1px solid #134579;
}
</style>
<script type="text/javascript">
var marginLeft;
var marginTop;
window.onload = function () {
marginTop = 0;
marginLeft = 0;
rePoint();
}
window.onresize = function () {
rePoint();
}
function rePoint() {
var marginTopIndex = parseInt((document.body.clientHeight - 680) / 2);
var marginLeftIndex = parseInt((document.body.clientWidth - 980) / 2);
if (marginLeftIndex < 0) {
marginLeftIndex = 0;
}
if (marginTopIndex < 0) {
marginTopIndex = 0;
}
if (marginLeft == marginLeftIndex && marginTop == marginTopIndex) {
return;
}
marginLeft = marginLeftIndex;
marginTop = marginTopIndex;
document.getElementById("mainDiv").style.marginLeft = marginLeft + "px";
document.getElementById("mainDiv").style.marginTop = marginTop + "px";
}
</script>
</head>
<body>
<div id="mainDiv" class="conent">
</div>
</body>
</html>
兼容各浏览器
<head>
<title></title>
<style type="text/css">
.conent
{
width: 980px;
height:680px;
border:1px solid #134579;
}
</style>
<script type="text/javascript">
var marginLeft;
var marginTop;
window.onload = function () {
marginTop = 0;
marginLeft = 0;
rePoint();
}
window.onresize = function () {
rePoint();
}
function rePoint() {
var marginTopIndex = parseInt((document.body.clientHeight - 680) / 2);
var marginLeftIndex = parseInt((document.body.clientWidth - 980) / 2);
if (marginLeftIndex < 0) {
marginLeftIndex = 0;
}
if (marginTopIndex < 0) {
marginTopIndex = 0;
}
if (marginLeft == marginLeftIndex && marginTop == marginTopIndex) {
return;
}
marginLeft = marginLeftIndex;
marginTop = marginTopIndex;
document.getElementById("mainDiv").style.marginLeft = marginLeft + "px";
document.getElementById("mainDiv").style.marginTop = marginTop + "px";
}
</script>
</head>
<body>
<div id="mainDiv" class="conent">
</div>
</body>
</html>
兼容各浏览器
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
