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 学习之旅 (1)
Feb 05 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 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
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php简单截取字符串代码示例
2016/10/19 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js点击选择文本的方法
2015/02/09 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
Python中字典和集合学习小结
2017/07/07 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
交通安全教育制度
2014/02/02 职场文书
小学数学国培感言
2014/03/10 职场文书
励志演讲稿范文
2014/04/29 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
什么是Python装饰器?如何定义和使用?
2022/04/11 Python