欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

css中position:fixed实现div居中上下左右居中,fixeddiv

shiping1 的头像

css中position:fixed实现div居中上下左右居中,fixeddiv


实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
上下左右 居中 

代码如下 

代码如下:

div{ 
position:fixed; /*这里也可以position:absolute;*/
margin:auto; 
left:0; 
right:0; 
top:0; 
bottom:0; 
width:200px; 
height:150px; 
}

如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可 
如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 

下面附一个DIV 元素在浏览器窗口居中 

其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧: 

代码如下
 
代码如下:

<style type="text/css"> 
.dialog{ 
position: fixed; 
_position:absolute; 
z-index:1; 
top: 50%; 
left: 50%; 
margin: -141px 0 0 -201px; 
width: 400px; 
height:280px; 
border:1px solid #CCC; 
line-height: 280px; 
text-align:center; 
font-size: 14px; 
background-color:#F4F4F4; 
overflow:hidden; 
} 
</style> 
<div class="dialog">我是在窗口正中央的,呵呵!</div>

 
设置的技巧全部在这里: 

代码如下 

代码如下:

.dialog{ 
position: fixed; 
_position:absolute; /* hack for IE6 */ 
z-index:1; 
top: 50%; 
left: 50%; 
margin: -141px 0 0 -201px; 
width: 400px; 
height:280px; 
border:1px solid #CCC; 
line-height: 280px; 
text-align:center; 
font-size: 14px; 
background-color:#F4F4F4; 
overflow:hidden; 
}

设置 position: fixed; _position:absolute; 
设置 left:50% 和 top:50%; 
 设置 margin: -(DIV的offsetWidth/2) 0 0 -(DIV的offsetHeight/2)

position:fixed div怎居中

div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}
 

怎实现div的上下左右都居中?

<style type="text/css">
<!-- 
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>

其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写 

注:上面的是一般用于垂直居中与浏览器,想解决div垂直居中与外层div的话,只需要给外层div加上position:relative;就好了;记住,外层div要设定高度和宽度

来自 http://www.bkjia.com/CSSjc/894147.html
 

普通分类: