CSS中position属性之fixed实现div居中


Posted in Javascript onDecember 14, 2015

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

上下左右 居中

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; /* 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)

效果图

CSS中position属性之fixed实现div居中

以上内容是小编给大家分享的CSS中position属性之fixed实现div居中的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 #Javascript
js实现拖拽效果(构造函数)
Dec 14 #Javascript
jQuery滚动加载图片实现原理
Dec 14 #Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 #Javascript
jquery实现倒计时效果
Dec 14 #Javascript
JavaScript 七大技巧(一)
Dec 13 #Javascript
JavaScript 七大技巧(二)
Dec 13 #Javascript
You might like
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
禁止空格提交表单的js代码
2013/11/17 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python提取字典key列表的方法
2015/07/11 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python自动发邮件脚本
2017/03/31 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python检查ping终端的方法
2019/01/26 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
2014小学植树节活动总结
2014/03/10 职场文书
立志成才演讲稿
2014/09/04 职场文书
2014年司法所工作总结
2014/11/22 职场文书
长城导游词
2015/01/30 职场文书
学习保证书100字
2015/02/26 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS