如何让DIV层在网页中居中显示
请问如何实现以下两种效果：一、用DIV+CSS要求一个层在网页中水平、垂直居中二、用DIV+CSS要求一个层在网页中水平右对齐、垂直居网页顶部如果CSS实现不了用JS控制...
请问如何实现以下两种效果：
一、用DIV+CSS要求一个层在网页中水平、垂直居中
二、用DIV+CSS要求一个层在网页中水平右对齐、垂直居网页顶部
如果CSS实现不了用JS控制层实现也行，谢谢 展开
一、用DIV+CSS要求一个层在网页中水平、垂直居中
二、用DIV+CSS要求一个层在网页中水平右对齐、垂直居网页顶部
如果CSS实现不了用JS控制层实现也行，谢谢 展开
3个回答
展开全部
实现层中的内容固定在页面的位置。
Position 属性，包括 全屏、
左上角、上居中、右上角、
左居中、居中（默认）、右居中、
左下角、下居中、右下角等10个位置。
X 属性，可根据 Position 属性进行相对水平偏移设置。（默认0）
Y 属性，可根据 Position 属性进行相对垂直偏移设置。（默认0）
Position 属性，包括 全屏、
左上角、上居中、右上角、
左居中、居中（默认）、右居中、
左下角、下居中、右下角等10个位置。
X 属性，可根据 Position 属性进行相对水平偏移设置。（默认0）
Y 属性，可根据 Position 属性进行相对垂直偏移设置。（默认0）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一、
<style>
#div1 {
position: absolute;
width:100px;
height:50px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-25px;
}
</style>
<body>
<div id="div1"></div>
</body>
二、
<script>
function set_div2(obj){
with(obj.style) {
left = document.body.offsetWidth-parseInt(width);
top = 0;
}
</script>
<body>
<div id="div2" onload="set_div2(this)"></div>
</body>
<style>
#div1 {
position: absolute;
width:100px;
height:50px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-25px;
}
</style>
<body>
<div id="div1"></div>
</body>
二、
<script>
function set_div2(obj){
with(obj.style) {
left = document.body.offsetWidth-parseInt(width);
top = 0;
}
</script>
<body>
<div id="div2" onload="set_div2(this)"></div>
</body>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<style>
html,body{height:100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#F00;}
.d2{width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
z-index:1;/*background-color:#FF0;*/}
.d3{background-color:#06C;
width:200px;
height:200px;
position:relative;
top:-50%;
left:-50%;}
</style>
</head>
<body>
<div
class="d2">
<div
class="d3">this</div>
</div>
</body></html>
<head>
<style>
html,body{height:100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#F00;}
.d2{width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
z-index:1;/*background-color:#FF0;*/}
.d3{background-color:#06C;
width:200px;
height:200px;
position:relative;
top:-50%;
left:-50%;}
</style>
</head>
<body>
<div
class="d2">
<div
class="d3">this</div>
</div>
</body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
