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 相关文章推荐
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
通过设置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可变函数的使用详解
2013/06/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
javascript打印输出json实例
2013/11/11 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
python实现朴素贝叶斯算法
2018/11/19 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python获取Linux发行版名称
2019/08/30 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Python创建自己的加密货币的示例
2021/03/01 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书