如何让DIV层在网页中居中显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让DIV层在网页中居中显示相关的知识，希望对你有一定的参考价值。
请问如何实现以下两种效果：
一、用DIV+CSS要求一个层在网页中水平、垂直居中
二、用DIV+CSS要求一个层在网页中水平右对齐、垂直居网页顶部
如果CSS实现不了用JS控制层实现也行，谢谢
Position 属性，包括 全屏、
左上角、上居中、右上角、
左居中、居中（默认）、右居中、
左下角、下居中、右下角等10个位置。
X 属性，可根据 Position 属性进行相对水平偏移设置。（默认0）
Y 属性，可根据 Position 属性进行相对垂直偏移设置。（默认0） 参考技术A 一、
<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>本回答被提问者采纳 参考技术B <html>
<head>
<style>
html,bodyheight:100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#F00;
.d2width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
z-index:1;/*background-color:#FF0;*/
.d3background-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>
让图片在div 中居中的方法
方法一：
思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
<div>
<img src="images/tt.gif" width="150" height="100" />
</div>
CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下：
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中
http://zhidao.baidu.com/link?url=u2Sh1t3AcCqRjd0isIK27_rim1eSx06HmTItZPvfeazgj2mYFluTLzpWfOFqzIUyvikhSTRRizI3h680woVInq
以上是关于如何让DIV层在网页中居中显示的主要内容，如果未能解决你的问题，请参考以下文章