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 文件夹选择框的两种解决方案
Jul 01 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
JS实现多选框的操作
Jun 24 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和ACCESS写聊天室(一)
2006/10/09 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python+django实现简单的文件上传
2016/08/17 Python
python xml解析实例详解
2016/11/14 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
建筑项目策划书
2014/01/13 职场文书
工作散漫检讨书
2014/09/16 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers