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的朋友一点学习经验小结
Nov 23 Javascript
js Event对象的5种坐标
Sep 12 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
浅谈Web Storage API的使用
Jun 23 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制作静态网站的模板框架
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
Sea.JS知识总结
2016/05/05 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python实现猜拳小游戏
2020/04/05 Python
pygame实现五子棋游戏
2019/10/29 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
单位成立周年感言
2014/01/26 职场文书
消防器材管理制度
2014/01/28 职场文书
重阳节登山活动方案
2014/02/03 职场文书
授权委托书
2014/07/31 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang