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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
jQuery侧边栏实现代码
May 06 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
ES6的解构赋值实例详解
May 06 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 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处理整数函数的详解
2013/06/09 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue.js todolist实现代码
2017/10/29 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
一句话工作感言
2014/03/01 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2014年教务处工作总结
2014/12/03 职场文书
运动会宣传稿50字
2015/07/23 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
修改并编译golang源码的操作步骤
2021/07/25 Golang
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js