关闭

使用属性position:fixed的时候如何才能让div居中

标签: divcsspositionfixeddiv居中
2816人阅读 评论(0) 收藏 举报
分类:

转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53994537
本文出自【我是干勾鱼的博客

有的时候我们会需要让一个div使用position:fixed属性,当然什么时候使用这个属性可以参考我的一篇文章《css的position定位属性中值absolute与值fixed二者的区别》

这个时候有一个棘手的问题是如何在这个时候让div居中显示,可以这样来实现:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style> 
.aa
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 200px;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}

.bb {
    border: solid yellow;
    background: red;
    z-index:9988;
}

</style>

<script type="text/javascript">
</script>

</head>
<body>

<div class="aa" >
    <div class="bb">aaabbbcccdddeeefffggghhhiiijjjkkklll</div>
    <div class="bb">胡适的杂文很好看</div>
    <div class="bb">或者,你可以看看林语堂的小说</div>
</div>

</body>
</html>

这里代码:

.aa
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 200px;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}

是关键。div就居中了,如图所示:

这里写图片描述

至于如何让这个div中的英文文字不溢出,可以参考我的文字:《div缩小时,里面的英文不会溢出功能的实现》

0
0
查看评论

css3 position fixed居中的问题

通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下: #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是,元素...
  • xiebaochun
  • xiebaochun
  • 2014-05-30 15:36
  • 12302

css position: fixed; 垂直居中,绝对定位居中

.boxout{ background:#fff; z-index: 111;===display:none; box-shadow: 0 1px 4px #AAA; position: fixed; _position:absolute; /* hack for IE6 */ top: 5...
  • viqecel
  • viqecel
  • 2016-10-23 16:26
  • 3812

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏...
  • czw2010
  • czw2010
  • 2013-04-07 21:36
  • 64706

项目中遇到的小问题,position:fixed无效的一种情况

position: fixed;无效
  • zhanghuiqi205
  • zhanghuiqi205
  • 2017-05-06 20:51
  • 2860

小技巧css解决移动端ios不兼容position:fixed属性,无需插件

ios运用position:fixed会错位,css一行样式巧妙解决定位问题。
  • liu__hua
  • liu__hua
  • 2014-10-15 09:34
  • 105191

CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;

当我滚动页面的时候,在可视区域的时候,我想让顶部的导航区域随着我页面的滚动一起滚动,但是当页面移动到一定位置的时候,如果还是使用postion:alsolute;来进行定位的话,顶部导航就回随着我页面的移动而移动。不会将导航下面的内容移动后,就自动以position:fixed的样子来显示顶部导航区...
  • qq_33072593
  • qq_33072593
  • 2017-08-25 11:24
  • 363

CSS position:fixed定位时 “高度坍塌” 问题的解决

CSS position:fixed定位时 “高度坍塌” 问题的解决
  • weixin_38123604
  • weixin_38123604
  • 2017-08-21 11:01
  • 618

几种解决position:fixed 抖动的方法

最近在给客户做的手机版网站中用到了position:fixed 来模拟手机APP的底部的导航条,但是在三星手机的浏览器上出现了 抖动的情况,类似于下图这种情况:   在下滑的过程中,底部导航条会跟不上,在其它手机的浏览器里均没有这种情况 这种情况在IE6浏览器下也会出现。 ...
  • zx_001
  • zx_001
  • 2015-12-14 14:19
  • 8918

position:fixed失效的问题

这几天做了一个手机端的demo(滑动推屏的那种),在底部放了一个div,position:fixed,bottom:0. 为了让动画性能更加,在body上加上了transform:translate3d(0,0,0),然后又调了一个js文件,这下问题来了,本来应该悬浮在底部的div不见了!!!推到...
  • gny315
  • gny315
  • 2015-08-18 18:05
  • 5860

踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案

1.-webkit-overflow-scroll:touch; 2.使用其他布局方式
  • grsghh
  • grsghh
  • 2017-03-11 14:37
  • 12621
    个人资料
    • 访问:608029次
    • 积分:6964
    • 等级:
    • 排名:第3956名
    • 原创:192篇
    • 转载:0篇
    • 译文:0篇
    • 评论:144条
    我的微信公众号
    欢迎大家关注我的微信公众号,使用微信搜索“东冬咚”或者“haidongzhisheng”。 更多精彩内容尽情期待!
    博客专栏
    最新评论