时间:2016-01-22 07:32 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【css中position：fixed实现div居中上下左右居中】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
css中position：fixed实现div居中上下左右居中
上下左右 居中
代码如下
复制代码
代码如下:div{
position:fixed;
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;
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）
关于css中position：fixed实现div居中上下左右居中的相关讨论如下：
相关问题：一个position：fixed属性的div中的另一个div居中失效
答：http://zhidao.baidu.com/question/454976357497923685.html?fr=qlquick >>详细
相关问题：Css position fixed后，如何让这个元素里面的子元...
答：好机智。。 >>详细
相关问题：css怎么让div上下居中，靠右对齐
答：上下居中··这个肯定就要用js算出来了···靠右对齐有很多种方法··position: fixed; right: 0;这样就靠右并且随滚动条滚动·一直固定在位置上···如果你是要做那种右下角的小窗口···纯css是不能解决问题的· >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-